vue2中父子组件生命周期钩子的执行顺序

挂载阶段（Mounting）

1. 父组件：

   • beforeCreate
   • created
   • beforeMount

2. 子组件：

   • beforeCreate
   • created
   • beforeMount

3. 子组件：

   • mounted

4. 父组件：

   • mounted

更新阶段（Updating）

1. 父组件：

   • beforeUpdate

2. 子组件：

   • beforeUpdate

3. 子组件：

   • updated

4. 父组件：

   • updated

卸载阶段（Unmounting）

1. 子组件：

   • beforeDestroy

2. 子组件：

   • destroyed

3. 父组件：

   • beforeDestroy

4. 父组件：

   • destroyed

以下是在Vue SFC Playground中执行的代码，记录一下，方便调试，目前无法模拟卸载阶段。

父组件代码：

<template>
  <div>
    <h1>{{ msg }}</h1>
    <span v-if="disa">父组件模拟更新</span>
    <children v-if="isLoad" :val="disa"/>
    <button @click="disa=false">模拟更新</button>
    <button @click="isLoad=false">模拟卸载</button>
  </div>

</template>

<script>
import children from './Children.vue'
export default{
  components:{
    children
  },
  data(){
    return {
      msg:'父组件',
      disa:true,
      isLoad:true,
      }
  },
  methods:{
    destroyComponent(){
      console.log("this.$refs.childDes.$destroy();",this.$refs)
    }
  },
    beforeCreate(){
    console.log('父：','beforeCreate')
  },
    created(){
    console.log('父：','createde')
  },
  beforeMount(){
    console.log('父：','beforeMount')
  },
  mounted(){
    console.log('父：','mounted')
  },
  beforeUpdate(){
    console.log('父：','beforeUpdate')
  },
  updated(){
    console.log('父：','updated')
  },
  beforeDestroy(){
    console.log('父：','beforeDestroy')
  },
  destroyed(){
    console.log('父：','destroyed')
  }
}

</script>

子组件代码：

<template>
  <div>
    <p>我是子组件</p>
    <span v-if="val">子组件更新</span>
    <!-- <gradson/> -->
  </div>
</template>

<script>
export default{
  props:{
    val:Boolean
  },
  beforeCreate(){
    console.log('子：','beforeCreate')
  },
    created(){
    console.log('子：','createde')
  },
  beforeMount(){
    console.log('子：','beforeMount')
  },
  mounted(){
    console.log('子：','mounted')
  },
  beforeUpdate(){
    console.log('子：','beforeUpdate')
  },
  updated(){
    console.log('子：','updated')
  },
  beforeDestroy(){
    console.log('子：','beforeDestroy')
  },
  destroyed(){
    console.log('子：','destroyed')
  }
}

</script>

打印结果：