vue父子组件的生命周期加载顺序
官网里vue组件的生命周期钩子汇总列举如下：
生命周期
单个
vue 组件的生命周期执行顺序已经非常熟悉了。但是，如果有嵌套组件，父子组件的生命周期的执行顺序是什么呢？嵌套组件又分为2种情况：一种是在template直接引入(大部分场景)，另一种是element-ui里面的嵌套，两种执行顺序是否一样呢？马上开启探索和验证之旅~
1. template直接引入式
<template>
<div class="detail-table">
<detail-table :row="row"></detail-table>
</div>
</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）条件判断式
<keep-alive>
<detail-table :row="row" v-if="show"></detail-table>
</keep-alive>
2）router-view式
<keep-alive include="child">
<router-view></router-view>
</keep-alive>
router-view式需要注意的点：
-
include为每个子组件的name字段，不是文件名；如果name不可用，则匹配当前组件components配置中的注册名称。 - 当匹配条件同时在
include与exclude存在时，以exclude优先级最高。 -
keep-alive用法参考：keep-alive
2. element-ui里面的表格嵌套
<el-table
: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="拼命加载中"
>
<el-table-column type="expand">
<template slot-scope="scope">
<detail-table
:row="row"
:key="scope.row.id"
></detail-table>
</template>
</el-table-column>
<el-table-column
v-for="item in columns"
:key="item.prop"
:label="item.label"
:prop="item.prop"
:formatter="item.formatter"
:align="'center'"
></el-table-column>
</el-table>
2.1 加载渲染过程和更新执行顺序
table-加载渲染
2.2
destory 过程执行顺序
table-destory
以上可以看出，两种执行顺序是不一样的，尤其加载渲染过程和更新过程。template直接引入式是先挂载子组件，再挂载父组件，而element-ui的表格嵌套是父组件加载更新完再加载子组件，等子组件更新完触发父组件更新。
参考：
Vue父子组件生命周期执行顺序
发表评论 (审核通过后显示评论)：