120、父子组件的生命周期

一、父子组件的生命周期对比 

• 加载渲染过程

　　父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指向父级。