前言

之前一篇文章详细讲解了Vue2生命周期的过程 —> Vue2生命周期详解
在实际开发中，一个页面经常会有父组件和子组件，那么在这个页面中，对于父子组件他们的生命周期又是如何执行的呢？看了一些网上的文章资料，竟然有些讲解写的是错误答案，带偏大家，所以在本文利用实践得出结论，带大家彻底搞懂这个知识点~

创建子组件和父组件

这里我就写一个页面，在里面创建子组件和父组件

let item = Vue.component('item', {
   template: `<div>
           <h1>{{item}}</h1>
           <h2>{{num}}</h2>
       </div>`,
   data() {
       return {
           item: '我是子组件',
           num: 0
       }
   },
 }

let vm = new Vue({
  el: "#app",
  data: {
      name: 'casey',
      flag: true
  },
}

<div id="app">
    name={{name}}
    {{flag}}
    <button @click="flag = !flag">切换</button>
    <item v-if="flag"></item>
</div>

因为这里要讲子组件销毁过程，所以就简单写了一个按钮绑定flag，点击则子组件消失，执行销毁过程
下面就是在上面定义好的子组件和父组件中进行生命周期打印，这里就不展示了，直接看结果

页面创建过程生命周期

打开页面，查看打印
很显然，页面创建的过程是这样的：父组件挂载之前会去寻找子组件，然后执行子组件的创建前后和挂载前后，然后再执行父组件的挂载后

1. 父创建前beforeCreate
2. 父创建之后created
3. 父挂载之前beforeMount
4. 子创建前beforeCreate
5. 子创建之后created
6. 子挂载之前beforeMount
7. 子挂载之后mounted
8. 父挂载之后mounted

子组件销毁过程生命周期

点击页面按钮，执行子组件销毁，来看看页面生命周期如何执行：
子组件销毁的时候，会先执行父组件的更新前，再执行子组件的销毁前后，再执行父组件的更新后

1. 父更新之前beforeUpdate
2. 子销毁之前beforeDestroy
3. 子销毁之后destroyed
4. 父更新之后updated

最后

父子组件的问题会经常在开发中涉及到，掌握好它们生命周期的执行顺序才能把握好代码逻辑，有补充欢迎评论区指出，对你有帮助点赞支持下呀~