vue学习之生命周期钩子

在 Vue.js 中，生命周期钩子（Lifecycle Hooks）是一组特殊的函数，它们在组件的不同阶段自动被调用。这些钩子函数允许开发者在组件创建、更新、渲染、销毁等关键时刻执行代码。

Vue 2.x 生命周期钩子：

1. beforeCreate：

   • 在实例初始化之后，数据观测和事件/侦听器配置之前被调用。

2. created：

   • 实例已经创建完成，数据观测和事件/侦听器已经配置好，但挂载阶段还没开始，$el 属性目前还不可见。

3. beforeMount：

   • 在挂载开始之前被调用：相关的 render 函数首次被调用。

4. mounted：

   • el 被新创建的 vm.$el 替换，vm.$el 已经添加到实例上去，所有的模板和DOM都在这个钩子里是可访问的。

5. beforeUpdate：

   • 数据更新时调用，发生在虚拟 DOM 打补丁之前。

6. updated：

   • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7. beforeDestroy：

   • 实例销毁之前调用。在这一步，实例仍然完全可用。

8. destroyed：

   • Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

9. errorCaptured（Vue 2.6+）：

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

Vue 3.x 生命周期钩子：

Vue 3.x 引入了 Composition API，它提供了一组与 Vue 2.x 生命周期钩子相对应的函数，这些函数在 setup 函数中使用：

1. setup：

   • 相当于 Vue 2.x 中的 beforeCreate 和 created 的结合。

2. onBeforeMount：

   • 相当于 Vue 2.x 中的 beforeMount。

3. onMounted：

   • 相当于 Vue 2.x 中的 mounted。

4. onBeforeUpdate：

   • 相当于 Vue 2.x 中的 beforeUpdate。

5. onUpdated：

   • 相当于 Vue 2.x 中的 updated。

6. onBeforeUnmount：

   • 相当于 Vue 2.x 中的 beforeDestroy。

7. onUnmounted：

   • 相当于 Vue 2.x 中的 destroyed。

8. onActivated 和 onDeactivated：

   • 用于 keep-alive 缓存的组件，分别在组件激活和停用时调用。

9. onErrorCaptured：

   • 与 Vue 2.x 中的 errorCaptured 相同。

使用生命周期钩子的注意事项：

• 避免在生命周期钩子中执行异步操作：虽然可以在 created、mounted 等钩子中执行异步操作，但要确保在组件销毁前处理完所有异步逻辑。
• 不要在 beforeCreate 或 created 阶段访问 $el：因为此时 DOM 还未渲染。
• 使用 beforeDestroy 和 destroyed 进行清理：例如，移除自定义的事件监听器或定时器。
• 在 beforeRouteEnter 和 beforeRouteLeave 等路由守卫中处理路由变化：这些守卫在 Vue 路由中用于处理路由导航。

生命周期钩子是 Vue 组件开发中不可或缺的部分，它们为组件的状态管理提供了清晰的执行时机。