一、问题1

1、问题描述：

我们通常习惯在组件的mounted阶段对要显示的数据进行一定的处理然后渲染页面。但是子组件在其mounted阶段无法获取父组件的异步数据以及父组件的mounted所创建的数据。

2、原因

• 父组件的异步数据必须等待其内部执行完毕之后才会被触发，具有一定的滞后；子组件是在父组件创建的同时紧跟着创建的，所以此时去获取父组件的异步数据内部还没有执行完毕，将获取到null。
• 根据父子组件生命周期执行的顺序，父组件的mounted是在子组件mounted执行完毕后才执行的，因此子组件在其mounted阶段无法获取父组件的mounted所创建的数据。

3、解决方案

为这些数据在子组件中设置watch。当数据更新时将触发操作。

4、示例代码

//vue父子组件间的数据传输-问题一：    父组件mounted中创建的数据或异步数据，子组件mouted中无法获得// 子组件Vue.component('child',{    template:'
child
',    props:['object','asyncData'],    mounted () {        console.log('child mounted object',this.object) // null        console.log('child mounted asyncData',this.asyncData) // null    },    // 解决方案：添加watch    watch: {         object (newOb) {            console.log('child watch object',nob)        },        asyncData (newData) {            console.log('child watch asyncData',ndata)        }    }})// 父组件new Vue({    el: '#app',    template: `        
    
            
             
    
    `,    data: {        object: null,        asyncData: null    },    mounted () {        setTimeout(() => this.asyncData = 'asyncData',1000)        this.object = {age :18}    }})复制代码

二、问题2

1、问题描述：

子组件设置watch监听父组件传输来的数据对象，但是当父组件改变数据对象中的某一个值时，子组件的watch并不会触发。

2、原因

子组件设置watch监听父组件传输来的数据对象时，只有当这个数据对象setter时才会触发子组件的watch，即只有给这个数据对象重新赋值才会触发子组件的watch，如果仅仅是修改数据对象中的某个属性，不会触发子组件的watch。

3、解决方案

为子组件的watch添加deep:true属性

4、示例代码

// 子组件设置watch监听父组件传输来的数据对象，   但是当父组件改变数据对象中的某一个值时，子组件的watch并不会触发。// 子组件Vue.component('child',{    template:'
{
    { age }}
',    props:['object'],    data () {        return {            age : null        }    },    watch: {         object: {            //解决方案            deep:true,              handler (nob) {                this.age = nob.age            }        }    }})// 父组件new Vue({    el: '#app',    template: `    
    
        
             
     改变父组件的object    
    
  `,    data: {        object: null    },    mounted () {        this.object = {age: 18}    },    methods: {        change () {            this.object.age = 20        }    }})复制代码