- 要想弄懂Vue父子组件的生命周期执行顺序，首先要知道vue页面的生命周期钩子函数的执行顺序，这也是在面试中老生常谈的问题，同时相信大家在工作的时候也能经常碰到父子组件加载上的问题，所以，不管是面试还是工作，我们都要弄懂这个问题。
Vue的生命周期钩子函数
| vue2生命周期API | 描述 |
|---|---|
| beforeCreate | 实例创建前（dom没生成，数据也拿不到） |
| created | 实例创建后（dom没生成，数据可以拿到） |
| beforeMount | DOM挂载前调用（dom没生成，数据可以拿到） |
| mounted | DOM挂载完成调用（dom已生成，数据可以拿到） |
| beforeUpdate | 数据更新之前被调用 |
| updated | 数据更新之后被调用 |
| activated | keep-alive组件激活时调用 |
| deactivated | keep-alive组件停用时调用 |
| beforeDestroy | 组件销毁前调用 |
| destroyed | 组件销毁完成调用 |
渲染过程
- beforeCreate------father
- created------father
- beforeMount------father
- beforeCreate------child
- created------child
- beforeNount------child
- Mounted------child
- Mounted------father
挂载阶段
父beforeCreate------>父created------>父beforeMount------>子beforeCreate------>子created------>子beforeMount------>子Mounted------>父Mounted
更新阶段
父beforeUpdate------>子beforeUpate------>子updated------>父updated
销毁阶段
父beforeDestroy------>子beforeDestroy------->子destroyed------>父destroyed
单一钩子函数总结
- beforeCreate执行时：data和el均未初始化，值为undefined
- created执行时：Vue实例观察的数据对象data已经配置好，已经可以得到data的值，但Vue实例使用的根DOM元素el还未初始化
- beforeMount执行时：data和el均已经初始化，但此时el并没有渲染进数据，el的值为“虚拟”的元素节点
- mounted执行时：此时el已经渲染完成并挂载到实例上
- beforeUpdate和updated触发时，el中的数据已经渲染完成，但只有updated钩子被调用时候，组件dom才被更新。
- 在created钩子中可以对data数据进行操作，这个时候可以进行数据请求将返回的数据赋给data
- 在mounted钩子对挂载的dom进行操作，此时，DOM已经被渲染到页面上。
- 虽然updated函数会在数据变化时被触发，但却不能准确的判断是哪个属性值被改变，所以实际情况中用computed或watch函数来监听属性的变化，并做一些其它的操作。
- 所有的生命周期钩子自动绑定this上下文到实例中，所以不能使用箭头函数来定义一个生命周期方法（例如 created:()=>this.fetchTodos()）,会导致this指向父级。
- activated钩子，组件全部挂载到页面时触发。activated()函数就是一个页面激活后的钩子函数，一进入页面就触发，所以当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中其只会在首次加载该组件的时候起作用。
- deactivated钩子，视图更新时触发，只有当视图更新了，才知道keep-alive组件被停用。
- 在使用v-router时有时需要使用keep-alive来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载或切换状态的时候进行某些操作，可以使用activated钩子调用。
