Vue-LifeCycle父子生命周期钩子函数【附简单应用场景】

1. 本篇随笔介绍当在 Vue 中，父子组件的生命周期函数。

2. 首先是父子组件执行顺序问题：

【1】加载渲染过程：

（1）如果仅有一个子组件，那么执行顺序为 father.beforeCreate -> father.created -> father.beforeMount -> son.beforeCreate -> son.created -> son.beforeMount -> son.mount -> father.mount

（2）如果有多个子组件，那么执行顺序为，先执行父组件的前三个生命周期钩子函数，然后按照在父组件DOM中的使用顺序，执行第一个使用的子组件的前三个生命周期函数，再执行第二个子组件的前三个生命周期函数......最后按顺序再依次执行子组件的 mount 钩子函数，最终执行父组件的 mount 生命周期钩子函数。为了清晰，我这里直接放一张图：

 这是父组件的 template 部分，其中按顺序使用了子组件2，子组件1，执行顺序如下：

【2】数据更新过程：

（1）仅有一个子组件：beforeUpdate(父) —> beforeUpdate(子) —> update(子) —> update(父)

（2）多个子组件：

 【3】vue 实例销毁过程：

（1）单个子组件：beforeDestory(父) —> beforeDestory(子) —> destoryed(子) —> destoryed(父)

（2）多个子组件：这个自己测试一下就好了，感觉用的不多。

3. 简单介绍一个实际应用场景：

　　假设有一个父组件和一个子组件，父组件从服务器获取数据，传给子组件，子组件根据这个数据将某些东西显示到页面上，如果是你，会怎么做？

　　最先想到的是，在父组件的 created 钩子函数中请求获取数据，传给子组件，子组件在 created 中获取父组件传过来的数据【props中】赋值给子组件的某个属性【data中】，理论上来说这样没有什么问题，但是要知道请求后端时一般需要耗费一些时间【异步请求】，此时不会等待父组件 created 钩子函数请求获取数据后再执行其它生命周期钩子函数，因此子组件中执行 created 时，可能获取到的是 undefined.

　　然后进一步改进，我们可能会想到，在父组件传值时添加一个 v-if 判断，注意，v-if 判断会改变生命周期执行顺序，以下是正常顺序：

　　

 　　添加 v-if 后，父组件和子组件生命周期函数单独执行了：

　　

　　我们不希望这样，因为这样的话，在请求未获取到数据之前，你的子组件一直不会显示出来，也就是说，假如请求时间过长，你的页面将一直是空白的，而不是先显示子组件的整体结构，等获取到数据，再把数据部分显示出来。因此正确的解决方案是，在子组件中添加 watch，而不是使用 created 钩子函数，监听父组件传过来值的这个数据的变化，先把子组件结构渲染出来，之后再填充数据。