一、父子组件的生命周期对比
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
在父组件执行beforeMount阶段后,进入子组件的beforeCreate、Created、beforeMount阶段,这些阶段和父组件类似。
子组件beforeMount阶段后,执行的是子组件的Mounted阶段,该阶段时子组件已经挂载到父组件上,并且父组件随之挂载到页面中。
子组件的activated:我们发现在子父组件全部挂载到页面之后被触发。这是因为子组件my-components被<keep-alive> 包裹,随$el的挂载被触发。如果子组件没有被<keep-alive>包裹,那么该阶段将不会被触发。
父组件的mounted执行时:此时el已经渲染完成并挂载到实例上。
- 子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
存在<keep-alive>时,子组件的调用顺序:beforeUpdate、deactivated、updated;
deactivated函数的触发时间是在视图更新时触发。因为当视图更新时才能知道keep-alive组件被停用了。
- 父组件更新过程
父beforeUpdate->父updated
- 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
注意:所有的生命周期钩子自动绑定 this
上下文到实例中,所以不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos()
)。这是导致this指向父级。