Vue之数据传递

基础：vue的响应式规则

简单的props更新

父组件

<template>
    <div>
        <block-a :out-data="x"></block-a>
    </div>
</template>

<script>
    import blockA from './block-a';

    export default {
        name: "App",
        components:{
            blockA
        },
        data(){
            return {
                x:123
            }
        },
        mounted(){
            setTimeout(()=>{
                this.x = 789;
            },1000)
        }
    }
</script>

子组件

<template>
    <div>
        这是子组件
        {{outData}}
    </div>
</template>

<script>
    export default {
        name: "block-a",
        props:['outData'],
        watch:{
            outData(newVal){
                console.log("新的值是：" + newVal)
            }
        }

    }
</script>

运行效果，界面先展示123，一秒后展示789，控制台仅输出了“新的值：789”。

结论：简单的数值类型能通过props动态反映到子组件内，而且能被子组件watch检测。

props对象的更新

父组件

<template>
    <div>
        <block-a :out-data="x"></block-a>
    </div>
</template>

<script>
    import blockA from './block-a';

    export default {
        name: "App",
        components:{
            blockA
        },
        data(){
            return {
                x:{
                    a:123,
                    b:999
                }
            }
        },
        mounted(){
            setTimeout(()=>{
                this.x.a = 789;
            },1000)
        }
    }
</script>

子组件

<template>
    <div>
        这是子组件
        {{outData}}
    </div>
</template>

<script>
    export default {
        name: "block-a",
        props:['outData'],
        watch:{
            outData(newVal){
                console.log("新的值是：" + newVal)
            }
        }
    }
</script>

这个例子对比上一个例子，将传递的数据改为了对象类型。对对象属性的变更，能动态反映到子组件中（子组件的界面一秒后发生正确的变化），但watch函数却没有执行（控制台无输出）。

为了监听对象属性的变化，将子组件中的watch设置修改如下：

        watch:{
            outData:{
                handler(newVal){
                    console.log("新的值是：" + newVal)
                },
                deep:true
            }
        }

这样代码运行起来，不仅界面会发生变化，而且控制台也会有输出了（属性变化能被子组件watch检测到了），虽然检测出来有属性变更，却没办法知道到底是哪个属性发生了变更。

补充测试1：修改原有属性，同时添加新的属性（this.x.c=123），则子组件中检测出对象原有属性发生变更后，读取到的对象中也包含了新的属性（c=123）。

补充测试2：父组件中直接为属性赋值一个新的对象，如

setTimeout(()=>{
    this.x = {
        kkk:123
    };
},1000)

则，不管子组件中采用深层watch还是普通的watch检测，都检测出变更（控制台有输出），而且界面也会发生正确变化。

补充测试3：将父组件中的响应式对象删除

<template>
    <div>
        <block-a :out-data="x"></block-a>
    </div>
</template>

<script>
    import blockA from './block-a';

    export default {
        name: "App",
        components:{
            blockA
        },
        data(){
            return {

            }
        },
        mounted(){
            setTimeout(()=>{
                this.x = {
                    kkk:123
                };
            },1000)
        }
    }
</script>

则代码运行会报错，提示渲染期间使用了x，而x未定义。而且后续子组件中没有发生任何变化，控制台也无输出。

结论：当父组件中的响应式对象通过props与子组件中的属性建立了关联后，父组件中的响应式对象发生变更（原属性发生变化和对象被重新赋值，前提是对应的setter存在，这样的赋值才是响应式的），都会通知到被关联子组件去重新渲染（与这个对象相关的属性部分dom渲染），而且watch函数会进入判断（如果是深层watch，则对比对象的属性，如果是普通watch，则简单对应对象的引用），如果没有判断出来发生变化，则不执行watch回调函数。

props对象属性的更新

以上发现一个问题，子组件能监听出对象属性发生了变化，却不知道变化了哪个属性。解决办法是使用简单watch，但是写法得改变一下，要直接定位到我关心的属性上，将子组件的watch修改如下

watch:{
    ['outData.a'](newVal){
        console.log("新的值是：" + newVal)
    }
}

对于父组件中的x被重新赋值：新对象不存在a属性或者a属性的值与原来的值不一致时，子组件中的watch才会执行，如果重新赋值后，新对象的a属性与原对象的a属性值相同，则watch回调不执行。

结论：在上一条结论的基础上，多加一点，这个例子中的这种watch写法，仅仅是简单地再次读取对象的某个属性值（a），与原来记录的值进行对比，如果不一致，则执行watch回调。而不在乎外部的对象是否被重新赋值了，还是属性被修改了。

修改props

父组件

<template>
    <div>
        <block-a :out-data="x"></block-a>
    </div>
</template>

<script>
    import blockA from './block-a';

    export default {
        name: "App",
        components:{
            blockA
        },
        data(){
            return {
                x:{
                    a:123,
                    b:999
                }
            }
        },
        mounted(){
            setTimeout(()=>{
                console.log("父组件中输出")
                console.log(this.x)
            },2000)
        }
    }
</script>

子组件

<template>
    <div>
        这是子组件
        {{outData}}
    </div>
</template>

<script>
    export default {
        name: "block-a",
        props:['outData'],
        watch:{
            ['outData.a'](newVal){
                console.log("新的值是：" + newVal)
            }
        },
        mounted(){
            this.outData.a = 888;
            setTimeout(()=>{
                console.log("子组件中输出")
                console.log(this.outData)
            },1000)
        }
    }
</script>

运行效果：子组件内的watch回调执行，然后子组件内输出了修改后的对象，接着父组件也输出了修改后的对象（a=888）。

虽然props传递（文档中解释props是单向传递的），但因为传递的是对象，所以子组件内对对象的修改等同于父组件中对对象的修改。子组件内通过props获取到的对象和父组件中的对象是一样的，打印出来，发现对象属性上都有getter和setter。

将对象类型改为普通类型，然后在子组件中对props进行修改，会有如下警告：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "outData"

虽然有这样的警告，却不会影响代码的执行（与出异常不一样，修改语句后面的代码依然会继续执行），子组件内props的变化依然是响应式的（界面显示也会跟着变化），但这样的修改却不会反映到父组件中，父组件中的输出依然是旧的值。

props的转换

上一个例子提示：不能直接修改props值，而应该使用基于props的data或computed属性。这里来演示一下。

父组件

<template>
    <div>
        <block-a :out-data="x"></block-a>
    </div>
</template>

<script>
    import blockA from './block-a';

    export default {
        name: "App",
        components:{
            blockA
        },
        data(){
            return {
                x:{
                    a:123,
                    b:999
                }
            }
        },
        mounted(){
            setTimeout(()=>{
                console.log("父组件中输出")
                console.log(this.x)
            },2000)
        }
    }
</script>

子组件中将props赋值给data属性

<template>
    <div>
        这是子组件
        {{outData}}
    </div>
</template>

<script>
    export default {
        name: "block-a",
        props:['outData'],
        watch:{
            ['outData.a'](newVal){
                console.log("新的值是：" + newVal)
            }
        },
        data(){
            return {
                localData:this.outData,
            }
        },
        mounted(){
            this.localData.a = 888;
            setTimeout(()=>{
                console.log("子组件中输出")
                console.log(this.localData)
            },1000)
        }
    }
</script>

代码运行的效果：与直接修改props对象效果一致，因为虽然修改的是本地的data属性对象，而它指向的是与props一样的对象，所以执行起来，子组件的watch函数会输出，而且子组件和父组件中的定时器输出是相同的对象。

父组件将传递的值从对象类型修改为基本类型，将子组件代码修改如下

<template>
    <div>
        这是子组件
        {{localData}}
    </div>
</template>

<script>
    export default {
        name: "block-a",
        props:['outData'],
        watch:{
            ['outData.a'](newVal){
                console.log("新的值是：" + newVal)
            }
        },
        data(){
            return {
                localData:this.outData,
            }
        },
        mounted(){
            this.localData = 888;
            setTimeout(()=>{
                console.log("子组件中输出")
                console.log(this.localData)
            },1000)
        }
    }
</script>

将基本类型从props属性转为data属性后，修改data属性，而不修改props属性，就不会提示之前的警告了，而且也不会影响父组件中的值。

但是这样修改之后，当父组件修改了传入的数据，因为子组件中直接读取的是data属性，而不是props属性，所以子组件没办法感知props的变更，解决办法是：在子组件中添加一个对props的watch，回调函数中更新data的值。接下来演示一下父子组件交替修改值的示例。

父组件

<template>
    <div>
        <block-a :out-data="x"></block-a>
    </div>
</template>

<script>
    import blockA from './block-a';

    export default {
        name: "App",
        components:{
            blockA
        },
        data(){
            return {
                x:"123"
            }
        },
        mounted(){
            let i = 0;
            setInterval(()=>{
                this.x = "父组件中设置新值：" + i++;
            },5000,100)
        }
    }
</script>

子组件

<template>
    <div>
        这是子组件
        {{localData}}
    </div>
</template>

<script>
    export default {
        name: "block-a",
        props:['outData'],
        watch:{
            ['outData'](newVal){
                this.localData = newVal;
            }
        },
        data(){
            return {
                localData:this.outData,
            }
        },
        mounted(){
            let i = 0;
            setInterval(()=>{
                this.localData = "子组件中设置新值：" + i++;
            },1000)
        }
    }
</script>

运行效果：子组件既能接收到父组件中的值，也能使用自己本地的值。

可以发现，才用这种“监听props + props转data”的办法，组件内的data数据来源就有两种了：来源于当前组件 + 来源于父组件。这种特点可以实现一个带缓存的分页组件，简单描述如下：

组件内维护一个data属性dataList，用于存储要展示的数据，当有组件内有数据缓存时，则将缓存赋值给dataList，来展示缓存的数据，当没有缓存时，则读取外部的props传入的值来显示，通过将这个新的数据缓存起来【这一步读取props的值时需要注意props变化的异步性】。

ps：实现props到data的双向绑定，可以查看这个代码 https://github.com/xxcanghai/cnblogsFiles/blob/master/vue-mixins/propsync.js

props变化的异步性

父组件中修改数据后，子组件中立马读取到的props值，并不是父组件中修改后的值。演示如下：

父组件

<template>
    <div>
        <block-a ref="subBlock" :out-data="x"></block-a>
    </div>
</template>

<script>
    import blockA from './block-a';

    export default {
        name: "App",
        components:{
            blockA
        },
        data(){
            return {
                x:"123"
            }
        },
        mounted(){
            this.x = 888;
            this.$refs.subBlock.getProps(); // 123
        }
    }
</script>

子组件

<template>
    <div>
        这是子组件
        {{outData}}
    </div>
</template>

<script>
    export default {
        name: "block-a",
        props: ['outData'],
        methods: {
            getProps() {
                console.log("获取到的props是：" + this.outData)
            }
        }
    }
</script>

运行效果：控制台输出123，而界面显示888 。这是因为JS是单线程的，父组件中修改完后，马上调用子组件的方法读取props值，这时响应式的代码还没执行，而应该将读取响应式的变化放到下一次vue循环中读取即可，子组件代码修改如下

getProps() {
    this.$nextTick(()=>{
        console.log("获取到的props是：" + this.outData)
    })
}

这样控制台也输出888了。

数组对象的props更新

还没测试，但应该与对象的情况一致，只不过数组与对象的响应式变化有些区别而已【注意有些情况下数组没办法去检测变化】