vue父子组件生命周期执行顺序_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里面的表格嵌套

:style="'margin-top:30px'"

row-key="id"

:data="data"

border

stripe

:highlight-current-row="true"

:header-cell-style="headerCellStyle"

:cell-style="cellStyle"

:max-height="height"

@expand-change="expandChange"

ref="multipleTable"

@selection-change="handleSelectionChange"

v-loading="listLoading"

element-loading-text="拼命加载中"

>

:row="row"

:key="scope.row.id"

>

v-for="item in columns"

:key="item.prop"

:label="item.label"

:prop="item.prop"

:formatter="item.formatter"

:align="'center'"

>

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

table-加载渲染

2.2 destory 过程执行顺序

table-destory

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