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

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父子组件生命周期执行顺序]