前言

在实践过程中发现，父子组件生命周期的执行顺序和预期的并不一样，记录一下，避免踩坑。

为了美观，文章内放的都是代码图片，如需要源码，请移步github，地址：github.com/bobofe

父子组件生命周期初探

parent.vue

child.vue

运行，在console中打印如下：

嗯，很惊喜有没有。。。

如果对父子组件生命周期的执行顺序理解不到位，可能会导致一些问题，比如：

• 父子组件通过prop异步传输数据

父子组件通过prop异步传输数据，子组件无法响应父组件传值

场景：父组件在mounted钩子函数中发起http请求获取数据，将获取到的数据赋值给本地data对象的属性上。然后通过prop将数据传递给子组件，子组件在mounted钩子函数将父组件传递过来的值赋值给本地data对象的属性上。结果，子组件无法渲染父组件传递过来的数据。看到这里是不是有一丢丢的熟悉，是的，在prop传输数据里也提到过这个问题。

二者区别在于：如果父组件不是异步请求数据，子组件会成功渲染一次，父组件数据改变子组件不会同步更新。如果父组件是异步请求数据，子组件一次都不会成功渲染。

解决方案：

【1】如果子组件接受父组件传递过来的值只是展示，不做转换，可以直接渲染父组件传过来的值，即可实时更新。

parent.vue

child.vue

编译执行，效果如下：

【2】如果子组件接受父组件传递过来的值经过转换展示，将prop赋值给子组件的data对象的属性，再用watch监听prop，prop改变后即时更新data对象上的属性。

注意：对象深层嵌套watch中加deep:true。

缺点: watch深度监听，如果监听的对象数据比较多，性能有损耗。

parent.vue

child.vue

未完待续