开发总结13-vue父子组件生命周期函数执行顺序

1. 生命周期函数

vue 的生命周期大概可以分为8个阶段, 创建前/后，载入前/后，更新前/后，销毁前/后;
activated 和 deactivated 是在使用 keep-alive 时独有的

1. beforeCreate: data和el均未初始化，值为undefined
2. created: Vue 实例观察的数据对象data已经配置好，已经可以得到data的值且data已经具有响应式，但Vue 实例使用的根 DOM 元素el还未初始化
3. beforeMount: 在模板编译之后,渲染之前触发;data和el均已经初始化，但此时el并没有渲染进数据，el的值为“虚拟”的元素节点
4. mounted: 此时el已经渲染完成并挂载到实例上;
5. beforeUpdate: 数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前;可以在该生命周期中进一步的更改状态,不会触发附加的重渲染过程;
6. updated: 在数据改变后,模板改变后触发; 数据更改导致的虚拟DOM重新渲染和打补丁,在这之后调用该生命周期函数; 调用该生命周期函数时,组件DOM已经更新,可以执行依赖DOM的操作;
7. activated: 使用 keep-alive 时调用
8. deactivated: 使用 keep-alive 时调用
9. beforeDestroy: 组件卸载前触发,可以在此时清理事件,计时器或者取消订阅操作;
10. destoryed: 实例销毁之后调用; 调用后, vue实例指示的所有东西都会解除绑定,所有的事件监听器会被一处,所有的子实例也会被销毁;

2. 父子组件初始化时 生命周期的执行顺序

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted->父mounted

3. 父子组件数据更新时 生命周期的执行顺序

父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

4. 父子组件销毁时 生命周期的执行顺序

父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

5. 常见问题

case1: 当子组件渲染的数据 是从父组件中调用接口获得数据,然后通过父子组件传值的方式传递到子组件渲染页面 页面渲染可能会出现问题;

分析: 接口调用为异步请求, 可能会出现子组件已经展示,但接口数据未返回的情况,造成页面展示异常;

解决方式:
方案一: 在子组件展示的时候加上判断条件 v-if = '接口返回数据'; 即有数据的时候,展示子组件; 这样就会形成天然的阻塞; 在父组件的生命周期函数中created/ mounted中的请求返回数据后,才会执行子组件的created, mounted;最后执行父组件的mounted;
方案二: 在子组件中添加watch监听, 父组件获取到值得时候, 就会触发watch监听, 从而实现重新渲染子组件

• 方案一 代码示例

<div class="fa-con">
    <children v-if="resData" :resData="resData" ></children>
</div>

• 方案二 代码示例

watch:{
    data:{
      deep:true,
      handler() {
        this.$nextTick(() => {
          this.data = resData
        })
      }
    },
}