参考资料

1. vue生命周期

beforeCreate（创建前） data 和 el均未初始化，值为undefined
created（创建后） data、mounted、watch等已经完成初始化，但是 el dom树还未挂载
beforeMount（挂载前） data 和 el 已经完成初始化，但此时el并没有渲染进数据，只是虚拟DOM节点
mounted（挂载后）el dom树已经渲染完成并挂载到实例上
beforeUpdate （更新前） data 数据更新前调用
updated （更新后）data 数据更新后调用
beforeDestroy（销毁前）组件销毁前调用 （常用于销毁监听事件）
destroyed（销毁后）组件销毁后调用
activated keep-alive 内置组件的钩子函数，当组件被激活的时候触发（进入前台）
deactivated keep-alive 内置组件的钩子函数，当组件被隐藏的时候触发（退居后台）

2. vue 父子组件生命周期的执行顺序

总结：最先和最后执行的都是父组件生命周期，子组件生命周期按照组件生命周期执行顺序在中间，当子组件开始挂载时开始执行子组件生命周期

组件初始化过程：

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

组件更新过程：

父beforeUpdate->子beforeUpdate->子updated->父updated

组件销毁过程：

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

3. 注意事项

1、所有的生命周期钩子自动绑定 this上下文到实例中
2、父子组件的生命周期都是同步执行的，如果在父组件中进行异步接口请求，并用于子组件渲染，建议在子组件的标签加上 v-if="传递的数据"，或者还可以在子组件中使用watch监听
3、虽然updated函数会在数据变化时被触发，但却不能准确的判断是那个属性值被改变，所以在实际情况中用computed或watch函数来监听属性的变化
4、在使用vue-router时有时需要使用keep-alive来缓存组件状态，这个时候 created 等组件初始化钩子就不会被重复调用了，只能触发 activated、deactivated这两个keep-alive专属钩子