Vue 3 生命周期钩子

18 min read

Vue 3 生命周期钩子

以下是 Vue 3 中可用的生命周期钩子及其对应的 Composition API 函数：

  1. beforeCreate / setup():

    • 在 Vue 3 中，beforeCreate 和 created 钩子的逻辑大多数可以在 setup() 函数中完成。setup() 是 Composition API 的入口点，它在组件的生命周期中非常早期调用，甚至在组件的选项和数据被处理之前。

  2. created:

    • 在 Vue 3 的 setup() 函数中处理。

  3. beforeMount / onBeforeMount():

    • 在挂载开始之前调用（即：模板编译/挂载之前）。

  4. mounted / onMounted():

    • 在组件挂载到其 DOM 节点之后调用。

  5. beforeUpdate / onBeforeUpdate():

    • 在组件更新之前调用，仅适用于组件的响应式数据变化，不适用于初始渲染。

  6. updated / onUpdated():

    • 在组件的 DOM 已经更新后调用，适用于需要在组件更新后执行的操作。

  7. beforeUnmount / onBeforeUnmount():

    • 在卸载组件实例之前调用。

  8. unmounted / onUnmounted():

    • 在组件的卸载后调用。

  9. activated / onActivated():

    • 专用于 <keep-alive> 缓存的组件，当组件被激活时调用。

  10. deactivated / onDeactivated():

    • 专用于 <keep-alive> 缓存的组件，当组件被停用时调用。

  11. errorCaptured / onErrorCaptured():

    • 当捕获一个来自子孙组件的错误时被调用。

  12. renderTracked / onRenderTracked():

    • 在渲染函数被访问时调用，主要用于调试目的。

  13. renderTriggered / onRenderTriggered():

    • 在渲染函数被触发重新渲染之前调用，也主要用于调试目的。

使用示例（Composition API）

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!');
    });

    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted!');
    });

    // 返回组件的响应式数据
    return {
      // ...
    };
  }
}

通过使用 Composition API，你可以在相同的 setup() 函数中组织所有的生命周期逻辑，这有助于提高代码的组织性和可读性。