Vue 2 和 Vue 3 生命周期钩子

Vue 2 和 Vue 3 生命周期钩子

在 Vue.js 开发中，了解生命周期钩子对于编写有效的组件至关重要。Vue 2 和 Vue 3 在生命周期钩子上大致相同，但 Vue 3 的 Composition API 引入了一种新的方式来处理它们。这里我会概述两者的生命周期钩子，并指出如何在 Vue 3 的 Composition API 中使用它们。

Vue 2 生命周期钩子

Vue 2 的生命周期钩子反映了组件从创建到销毁过程中的各个阶段：

1. beforeCreate：在实例初始化之后、数据观察 (data observation) 和事件/侦听器配置之前被调用。
2. created：在实例创建完成后被立即调用。在这个阶段，实例已完成数据观察、属性和方法的运算，以及事件侦听器的配置，但尚未开始 DOM 渲染，$el 属性目前不可见。
3. beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
4. mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载到了文档内，当 mounted 被调用时 vm.$el 也在文档内。
5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器被移除，所有的子实例也都被销毁。

Vue 3 生命周期钩子

Vue 3 保留了这些生命周期钩子，但在使用 Composition API 时，这些钩子有对应的函数可以在 setup() 函数内部使用，如下：

• beforeCreate 和 created 在 Vue 3 的 setup() 函数中无直接等价物，因为 setup() 函数本身就是在这些阶段调用的。
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeUnmount （在 Vue 3 中替代了 beforeDestroy）-> onBeforeUnmount
• unmounted （在 Vue 3 中替代了 destroyed）-> onUnmounted
• 新增：onActivated、onDeactivated（用于 <keep-alive> 缓存的组件）
• 新增：onErrorCaptured 和 onRenderTracked、onRenderTriggered（用于调试目的）

使用 Composition API 的生命周期钩子

在 Vue 3 的 setup() 函数中，这些生命周期钩子的使用示例如下：

import { onMounted, onBeforeUnmount } from 'vue';

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

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

理解这些生命周期钩子及其在 Vue 2 和 Vue 3 中的使用将帮助你更好地掌握 Vue 应用程序的行为和性能优化。