vue嵌套组件声明周期执行顺序

源作者：无限循环无限

链接：https://juejin.cn/post/6844904113914773518

来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

这里做简单总结和加工:

加载渲染过程

1. 父组件: beforeCreate->created->beforeMount->
2. 子组件: beforeCreate->created->beforeMount->mounted->
3. keep-alive: 如果子元素被keep-alive包裹则执行 activated 声明周期钩子 并且mounted钩子之前(包括mounted)的钩子只执行一次->
4. 父组件: mounted

更新过程

1. 父组件: beforeUpdate->
2. 子组件: beforeUpdate->updated->
3. 父组件: updated

销毁过程

1. 父组件: beforeDestroy->
2. 子组件: ( beforeDestroy->destroyed-> | 如果有被keep-alive则: deactivated-> )
3. 父组件: destroyed

keep-alive

加载渲染过程

1. 父组件: beforeCreate->created->beforeMount->
2. 子组件: beforeCreate->created->beforeMount->mounted->activated->
3. 父组件: mounted

更新过程

1. 父组件: beforeUpdate->
2. 子组件: beforeUpdate->updated->
3. 父组件: updated

销毁过程

1. 父组件: beforeDestroy->
2. 子组件: deactivated-> beforeDestroy->destroyed->
3. 父组件: destroyed

组件执行过程中的注意事项

1. created钩子中可以对data数据进行操作，这个时候可以进行数据请求将返回的数据赋给data
2. mounted钩子对挂载的dom进行操作，此时，DOM已经被渲染到页面上。
3. 虽然updated函数会在数据变化时被触发，但却不能准确的判断是那个属性值被改变，所以在实际情况中用computed或watch函数来监听属性的变化，并做一些其他的操作。
4. 所有的生命周期钩子自动绑定 this 上下文到实例中，所以不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos()),会导致this指向父级。
5. 在使用vue-router时有时需要使用<keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载或切换状态的时候进行某些操作，可以使用activated钩子触发。
6. 接口响应是异步的。这会导致无论你在父组件哪个钩子发请求，在子组件钩子接收数据时都有可能是获取不到的。
   父子组件的钩子并不会等待请求返回，请求是异步的
   为了确保按照理想的顺序执行 :
   通过v-if来控制子组件渲染时机 要在子组件标签上加上v-if=“接口数据” 等待数据存在时渲染子组件 缺点是加载时间可能过长
   也可以在子组件中用 watch 监听接收数据的 变量 来达到当数据获取时再执行初始化时一些逻辑操作