Vue的父子组件生命周期钩子函数执行顺序 （权威版）

一、前言

         在学习到Vue的父子组件生命周期钩子函数执行顺序的时候，在网上找了很久的资料，发现网上给的参差不齐，已经见到了很多中不同的顺序。
        秉持着求真的态度，在Vue项目编写代码来测试，以下是测试的权威结果。

二、Vue的父子组件生命周期钩子函数的执行顺序如下：

1. 加载渲染过程：

父组件的 beforeCreate：在父组件实例被创建之前调用。

父组件的 created：在父组件实例创建完成后调用。

父组件的 beforeMount：在父组件开始挂载之前调用，此时模板已经编译成虚拟DOM。

子组件的 beforeCreate 和 created：在父组件的 beforeMount 钩子内，子组件的 beforeCreate 和 created 钩子依次被调用。

子组件的 beforeMount 和 mounted：子组件的虚拟DOM挂载成真实DOM后，mounted 钩子被调用。

父组件的 mounted：在子组件挂载完成后，父组件的 mounted 钩子被调用，表示整个父组件及其子组件都已经挂载完成。

2. 更新过程（当数据变化时）：

父组件的 beforeUpdate：在父组件的虚拟DOM重新渲染和打补丁之前调用。

子组件的 beforeUpdate 和 updated：子组件根据新的数据重新渲染和更新。

父组件的 updated：在父组件的DOM更新后调用。

3. 销毁过程：

父组件的 beforeDestroy：在父组件销毁之前调用，用于执行清理任务。

子组件的 beforeDestroy 和 destroyed：子组件在父组件销毁之前先进行销毁。

父组件的 destroyed：父组件及其所有子组件都已经被销毁。

这个顺序确保了Vue组件的层次结构在生命周期中的正确管理。父组件需要等待其子组件完成挂载或更新后，才能继续其自己的挂载或更新过程。同样，在销毁过程中，父组件也需要等待其子组件完全销毁后，才能被完全销毁。

三、检验操作步骤

1. 父组件示例代码

<!-- ParentComponent.vue -->
<template>
  <div>
    <p>Parent Component</p>
    <ChildComponent v-if="showChild" />
    <button @click="toggleChild">Toggle Child</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showChild: true
    };
  },
  beforeCreate() {
    console.log('Parent Component beforeCreate');
  },
  created() {
    console.log('Parent Component created');
  },
  beforeMount() {
    console.log('Parent Component beforeMount');
  },
  mounted() {
    console.log('Parent Component mounted');
  },
  beforeUpdate() {
    console.log('Parent Component beforeUpdate');
  },
  updated() {
    console.log('Parent Component updated');
  },
  beforeDestroy() {
    console.log('Parent Component beforeDestroy');
  },
  destroyed() {
    console.log('Parent Component destroyed');
  },
  methods: {
    toggleChild() {
      this.showChild = !this.showChild;
    }
  }
};
</script>

2. 子组件示例代码

<!-- ChildComponent.vue -->
<template>
  <p>Child Component</p>
</template>

<script>
export default {
  beforeCreate() {
    console.log('Child Component beforeCreate');
  },
  created() {
    console.log('Child Component created');
  },
  beforeMount() {
    console.log('Child Component beforeMount');
  },
  mounted() {
    console.log('Child Component mounted');
  },
  beforeUpdate() {
    console.log('Child Component beforeUpdate');
  },
  updated() {
    console.log('Child Component updated');
  },
  beforeDestroy() {
    console.log('Child Component beforeDestroy');
  },
  destroyed() {
    console.log('Child Component destroyed');
  }
};
</script>

3. 控制台输出结果（以加载渲染过程为例，此处父组件为App.vue，子组件TheWelcome.vue）

好了，以上就是所有内容了，感觉有帮助的点个赞赞吧！