vue父子组件的生命周期加载顺序

官网里vue组件的生命周期钩子汇总列举如下：

生命周期

单个 vue 组件的生命周期执行顺序已经非常熟悉了。但是，如果有嵌套组件，父子组件的生命周期的执行顺序是什么呢？嵌套组件又分为2种情况：一种是在template直接引入(大部分场景)，另一种是element-ui里面的嵌套，两种执行顺序是否一样呢？马上开启探索和验证之旅~

1. template直接引入式

1.1 加载渲染过程执行顺序

加载渲染过程

1.2 activated 执行时机

activated

activated在子组件mounted（全部挂载到页面）之后，父组件mounted之前触发。

1.3 更新过程执行顺序

update

1.4 destory 过程执行顺序

destory

1.5 deactivated 执行时机
  deactivated 函数的触发时间是在视图更新时触发。因为当视图更新时才能知道 keep-alive 组件被停用了，所以分为两种情况。
1.5.1. 更新过程中的执行时机：在父beforeUpdate 和update之间执行

更新过程中

1.5.2. 销毁过程中的执行时机：在父子组件beforeDestroy之间执行

销毁过程中

延申：deactivated可以通过条件判断或者router-view去触发
1）条件判断式

2）router-view式

router-view式需要注意的点：

• include 为每个子组件的name字段，不是文件名；如果 name 不可用，则匹配当前组件 components 配置中的注册名称。
• 当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高。
• keep-alive用法参考：keep-alive

2. element-ui里面的表格嵌套

2.1 加载渲染过程和更新执行顺序

table-加载渲染

2.2 destory 过程执行顺序

table-destory

以上可以看出，两种执行顺序是不一样的，尤其加载渲染过程和更新过程。template直接引入式是先挂载子组件，再挂载父组件，而element-ui的表格嵌套是父组件加载更新完再加载子组件，等子组件更新完触发父组件更新。

参考：
Vue父子组件生命周期执行顺序