官网里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的表格嵌套是父组件加载更新完再加载子组件,等子组件更新完触发父组件更新。