组件的生命周期钩子函数的执行顺序是怎样的？

选项式组件生命周期钩子执行顺序
- 当组件第一次创建和挂载时：
  - beforeCreate：首先执行。这个阶段组件实例刚刚开始创建，data和事件还没有被初始化，此时不能访问组件的data属性和方法。
  - created：在beforeCreate之后执行。此时组件实例已经创建完成，data已经被设置为响应式，所以可以访问data和computed等属性。不过此时组件还没有挂载到 DOM 上。
  - beforeMount：在组件即将挂载到 DOM 之前执行。模板已经编译完成，但 DOM 元素尚未插入页面。
  - mounted：在组件挂载到 DOM 之后执行。此时可以通过this.$el访问组件的 DOM 元素，并且可以进行与 DOM 相关的操作，比如初始化第三方插件等。
- 当组件的数据更新时：
  - beforeUpdate：在数据更新后，DOM 更新之前执行。可以在这里获取更新前的数据状态。
  - updated：在 DOM 根据更新后的数据重新渲染完成后执行。
- 当组件卸载时：
  - beforeUnmount：在组件即将从 DOM 中移除之前执行。这是清理组件资源（如定时器、事件监听器等）的好时机。
  - unmounted：在组件从 DOM 中移除之后执行。
组合式组件（使用setup函数）生命周期钩子执行顺序与对应关系
- 组合式组件和选项式组件生命周期钩子功能类似，只是使用方式有所不同。
- 对于创建和挂载过程：
  - onBeforeMount：对应选项式组件的beforeMount，在组件挂载到 DOM 之前调用。在setup函数中通过import { onBeforeMount } from 'vue';引入并使用。
  - onMounted：对应选项式组件的mounted，在组件挂载到 DOM 之后调用。
- 对于数据更新：
  - onBeforeUpdate：对应选项式组件的beforeUpdate，在数据更新 DOM 更新之前调用。
  - onUpdated：对应选项式组件的updated，在数据更新 DOM 更新之后调用。
- 对于组件卸载：
  - onBeforeUnmount：对应选项式组件的beforeUnmount，在组件卸载之前调用。
  - onUnmounted：对应选项式组件的unmounted，在组件卸载之后调用。
示例说明执行顺序
- 假设我们有一个简单的计数器组件，既使用选项式组件写法又展示组合式组件写法来观察生命周期钩子的执行顺序：
- 选项式组件部分：

const CounterOption = {
  data() {
    return {
      count: 0
    };
  },
  beforeCreate() {
    console.log('选项式 - beforeCreate');
  },
  created() {
    console.log('选项式 - created');
  },
  beforeMount() {
    console.log('选项式 - beforeMount');
  },
  mounted() {
    console.log('选项式 - mounted');
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  beforeUpdate() {
    console.log('选项式 - beforeUpdate');
  },
  updated() {
    console.log('选项式 - updated');
  },
  beforeUnmount() {
    console.log('选项式 - beforeUnmount');
  },
  unmounted() {
    console.log('选项式 - unmounted');
  }
};

组合式组件部分：

import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
const CounterComposition = {
  setup() {
    const count = ref(0);
    onBeforeMount(() => {
      console.log('组合式 - onBeforeMount');
    });
    onMounted(() => {
      console.log('组合式 - onMounted');
    });
    const increment = () => {
      count.value++;
    };
    onBeforeUpdate(() => {
      console.log('组合式 - onBeforeUpdate');
    });
    onUpdated(() => {
      console.log('组合式 - onUpdated');
    });
    onBeforeUnmount(() => {
      console.log('组合式 - onBeforeUnmount');
    });
    onUnmounted(() => {
      console.log('组合式 - onUnmounted');
    });
    return {
      count,
      increment
    };
  }
};

当首次加载组件时，控制台输出顺序大致如下：
- 选项式 - beforeCreate
- 选项式 - created
- 选项式 - beforeMount
- 组合式 - onBeforeMount
- 选项式 - mounted
- 组合式 - onMounted
当点击按钮触发increment方法更新数据时，控制台输出顺序大致如下：
- 选项式 - beforeUpdate
- 组合式 - onBeforeUpdate
- 选项式 - updated
- 组合式 - onUpdated
当卸载组件时，控制台输出顺序大致如下：
- 选项式 - beforeUnmount
- 组合式 - onBeforeUnmount
- 选项式 - unmounted
- 组合式 - onUnmounted

组件的生命周期钩子函数的执行顺序是怎样的？

猜你喜欢