Vue 2.x 和 Vue 3.x 生命周期钩子函数详解 | Vue 生命周期指南

Vue 的生命周期是指 Vue 实例从创建到销毁的整个过程。在这个过程中，Vue 提供了一系列的生命周期钩子函数，允许开发者在特定的阶段执行自定义逻辑。以下是 Vue 2.x 和 Vue 3.x 的主要生命周期钩子函数：

Vue 2.x 生命周期钩子

1. beforeCreate

   • 触发时机: 实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前。
   • 用途: 此时实例的 data 和 methods 还未初始化，通常用于插件开发或全局配置。

2. created

   • 触发时机: 实例已经创建完成，数据观测 (data observer) 和 event/watcher 事件配置已完成。
   • 用途: 此时可以访问 data 和 methods，常用于发起异步请求、初始化数据等。

3. beforeMount

   • 触发时机: 在挂载开始之前被调用，相关的 render 函数首次被调用。
   • 用途: 此时模板编译已完成，但尚未将生成的 DOM 插入到页面中。

4. mounted

   • 触发时机: 实例已经挂载到 DOM 上，此时可以访问到 DOM 元素。
   • 用途: 常用于操作 DOM、初始化第三方库、发起依赖于 DOM 的请求等。

5. beforeUpdate

   • 触发时机: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   • 用途: 可以在更新之前访问现有的 DOM，例如保存滚动位置。

6. updated

   • 触发时机: 数据更新导致虚拟 DOM 重新渲染和打补丁之后。
   • 用途: 此时 DOM 已经更新，可以执行依赖于新 DOM 的操作。

7. beforeDestroy

   • 触发时机: 实例销毁之前调用。
   • 用途: 此时实例仍然完全可用，常用于清理定时器、取消订阅、解绑事件等。

8. destroyed

   • 触发时机: 实例销毁之后调用。
   • 用途: 此时所有的事件监听器和子实例都已被移除。

Vue 3.x 生命周期钩子

Vue 3.x 的生命周期钩子与 Vue 2.x 类似，但有一些变化和新增的钩子：

1. setup

   • 触发时机: 在 beforeCreate 和 created 之前执行，是 Composition API 的入口。
   • 用途: 用于替代 beforeCreate 和 created，通常在这里定义响应式数据、计算属性、方法等。

2. onBeforeMount

   • 触发时机: 在挂载开始之前调用，类似于 Vue 2.x 的 beforeMount。

3. onMounted

   • 触发时机: 实例已经挂载到 DOM 上，类似于 Vue 2.x 的 mounted。

4. onBeforeUpdate

   • 触发时机: 数据更新时调用，类似于 Vue 2.x 的 beforeUpdate。

5. onUpdated

   • 触发时机: 数据更新导致虚拟 DOM 重新渲染和打补丁之后，类似于 Vue 2.x 的 updated。

6. onBeforeUnmount

   • 触发时机: 实例卸载之前调用，类似于 Vue 2.x 的 beforeDestroy。

7. onUnmounted

   • 触发时机: 实例卸载之后调用，类似于 Vue 2.x 的 destroyed。

8. onErrorCaptured

   • 触发时机: 捕获来自子孙组件的错误时调用。
   • 用途: 用于错误处理，类似于 React 的 componentDidCatch。

生命周期图示

以下是一个简化的 Vue 生命周期图示：

beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

在 Vue 3.x 中，setup 钩子在 beforeCreate 和 created 之前执行。

最佳实践

• 避免在 beforeCreate 和 created 中操作 DOM，因为此时 DOM 还未挂载。
• 在 mounted 中操作 DOM，确保 DOM 已经存在。
• 在 beforeDestroy 或 onBeforeUnmount 中清理资源，如定时器、事件监听器等，避免内存泄漏。
• 使用 onErrorCaptured 捕获和处理错误，提高应用的健壮性。

理解 Vue 的生命周期对于编写高效、可维护的 Vue 应用至关重要。通过合理使用生命周期钩子，可以在不同的阶段执行相应的逻辑，确保应用的稳定性和性能。