博客站

Vue 3 的生命周期钩子与 Vue 2 类似，但在 Composition API 中，生命周期钩子的使用方式有所变化。以下是 Vue 3 中的生命周期钩子及其在 Options API 和 Composition API 中的使用方式：

1. Options API 中的生命周期钩子

在 Options API 中，生命周期钩子是通过选项来定义的。以下是 Vue 3 中可用的生命周期钩子：

• beforeCreate：在实例初始化之后，数据观测 (data observation) 和事件/侦听器的配置之前被调用。
• created：在实例创建完成后被立即调用。在这一步，实例已完成以下配置：数据观测 (data observation)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。
• beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
• beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
• updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
• beforeUnmount：在卸载组件实例之前调用。在这一步，实例仍然完全可用。
• unmounted：卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件监听器被移除，所有子实例也都被卸载。
• errorCaptured：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

2. Composition API 中的生命周期钩子

在 Composition API 中，生命周期钩子是通过函数来定义的，并且需要在 setup 函数中使用。以下是 Composition API 中对应的生命周期钩子：

• onBeforeMount：在挂载开始之前被调用。
• onMounted：实例被挂载后调用。
• onBeforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
• onUpdated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
• onBeforeUnmount：在卸载组件实例之前调用。
• onUnmounted：卸载组件实例后调用。
• onErrorCaptured：当捕获一个来自子孙组件的错误时被调用。

示例代码

Options API 中的生命周期钩子

export default {
  data() {
    return {
      message: 'Hello Vue 3',
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  },
  errorCaptured(err, vm, info) {
    console.log('errorCaptured', err, vm, info);
    return false; // 阻止错误继续向上传播
  },
};

Composition API 中的生命周期钩子

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('onBeforeMount');
    });

    onMounted(() => {
      console.log('onMounted');
    });

    onBeforeUpdate(() => {
      console.log('onBeforeUpdate');
    });

    onUpdated(() => {
      console.log('onUpdated');
    });

    onBeforeUnmount(() => {
      console.log('onBeforeUnmount');
    });

    onUnmounted(() => {
      console.log('onUnmounted');
    });

    onErrorCaptured((err, vm, info) => {
      console.log('onErrorCaptured', err, vm, info);
      return false; // 阻止错误继续向上传播
    });

    return {
      message: 'Hello Vue 3',
    };
  },
};

总结

• Options API 中的生命周期钩子是通过选项来定义的，适合在传统的 Vue 组件中使用。
• Composition API 中的生命周期钩子是通过函数来定义的，适合在 setup 函数中使用，提供了更灵活的方式来管理组件的生命周期。

无论是使用 Options API 还是 Composition API，理解生命周期钩子的执行顺序和作用对于开发 Vue 应用都是非常重要的。