生命周期函数父子组件16个钩子执行顺序

前景提要:

1.有一对父子组件

2.父子组件中均有8个钩子函数

3.观察执行顺序及逻辑

先上结论,想看过程的可以继续看下面

结论:

当页面初次渲染时:

        1.首先触发父组件的beforeCreate,created,beforeMount三个钩子

        2.触发子组件的beforeCreate,created,beforeMount,mounted四个钩子

        3.最后再触发父组件的挂载后mounted钩子

当页面更新时:

        1.触发了子组件的更新前后beforeUpdate,updated两个钩子

当页面进行销毁时:

        1.子组件进行销毁

                触发自身的销毁前后beforeUpdate,updated两个钩子

        2.父组件对子组件进行销毁时

                首先触发父组件的更新前钩子beforeUpdate

                然后触发子组件的销毁前后beforeDestroy和destroyed两个钩子

                最后触发父组件的更新后updated钩子

参考代码(vue)

父:

子:

直接看效果

 分析:

1.从这里可以看到在没有挂载到网页上之前数据是拿不到的

2.父与子的执行顺序,初始渲染时是先依次触发父组件的beforeCreate,created,beforeMount然后依次触发子组件的beforeCreate,created,beforeMount,mounted,最后再触发父组件的mounted

点击按钮更新页面,观察后续效果

分析: 

1.此处可以看到子组件的beforeUpdate,updated两个钩子触发了

2.此时的子组件获取到了数据

3.父组件的更新钩子没有触发

问题:

        那么销毁的钩子怎么触发呢?

       就是字面意思销毁,那么怎么触发呢?

//在子组件的ul上添加  v-if="isShow"



//在子组件的data新增

isShow:true


//在父组件也进行相同 *** 作



data() {
    return {
      isShow:true
    }
  },

直接看效果

首先是对子组件进行 *** 作

发现干掉它自己只能触发自身的beforeUpdate,updated

 然后对父组件进行 *** 作

 发现依次触发了父组件的beforeUpdate,子组件的beforeDestroy和destroyed,然后又触发了父组件的updated