搞清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··我的头发······