阅读 482

搞清Vue生命周期执行顺序

前言

标题党就是我··· 最近在学习一个前端的面试课程,里面讲到Vue相关知识时提到生命周期

这张图大家很熟悉了吧

  beforeCreate () {
    console.log('beforeCreate')
  },
  created () {
    console.log('created')
  },
  beforeMount () {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted')
  },
  beforeDestroy () {
    console.log('beforeDestroy')
  },
  destroyed () {
    console.log('destroyed')
  }
复制代码

顺序也就这样了,从命名也能猜出来,但是··· 如果加入父子组件呢? 恩?? 反正我作为菜狗复制粘贴工程师有点懵逼的··· 所以我就CLI一把梭了个项目,然后实验开始。

父子组件生命周期执行顺序

代码很简单,就是随便写个子组件引入,父子组件里在各个生命周期Log一下而已

直接上结果

再画个简单的示意图吧,菊黄色是子组件

结论,父组件先beforeCreate => created => beforeMount , 然后子组件开始beforeCreate => created => beforeMount => mounted 子组件挂载完成了,父组件再mounted

基本就是这样了,那么再复杂一点呢?

有孙组件呢

先简单加上孙组件后

其实也能推断出来,按照之前的逻辑。

结论,父组件先beforeCreate => created => beforeMount , 然后子组件开始beforeCreate => created => beforeMount ,然后孙组件beforeCreate => created => beforeMount => mounted,孙组件挂载完成了,子组件mounted,父组件再mounted

那么加上Keep-Alive,再数据更新一下呢

都到这里了复杂的直接上吧,什么activated updated destroyed,你们一起上吧我赶时间

代码大概是这样的,Index是父组件,List是子组件,secondChild是孙组件。父组件通过props传递数据给子组件,子组件继续通过props把该数据传给孙组件。

图上大概标注了已经

ps:当然这还不是最复杂的··如果再配上router的守卫钩子···emmmmm··我的头发······