每个 vue.js 生命周期钩子的用例是什么？

Question

所以我对 vue 的生命周期钩子有所了解，但对于其中一些，我想不出任何应该在其中完成的真实世界用例或示例，我认为这可能有助于我通过找出来更好地理解它们他们的用例。

以下是我对他们的了解和不了解：

创建挂钩

1. beforeCreate()：事件和生命周期已初始化，但数据尚未响应 --- 用例 ??
2. created()：您可以访问响应式数据和事件，但模板和虚拟 DOM 尚未安装或渲染 --- 用例：API 调用

安装挂钩

1. beforeMount()：在初始渲染之前运行 --- 用例 ??
2. mounted()：你可以访问响应式组件、模板和渲染的 DOM --- 用例：修改 DOM

更新挂钩

1. beforeUpdate()：在数据更改之后和重新渲染 DOM 之前运行 --- 用例 ??
2. updated()：在数据更改并重新渲染 DOM 后运行 --- 用例 ??

破坏钩子

1. beforeDestroy()：在拆卸前运行 --- 用例：清理以避免内存泄漏
2. destroyed()：在拆除后运行 --- 用例 ??

提前感谢任何帮助我更好地理解这些概念的人;)

Answer 1

根据VueJS官方网站：

每个 Vue 实例在创建时都会经过一系列初始化步骤——例如，它需要设置数据观察、编译模板、将实例挂载到 DOM、以及在数据变化时更新 DOM。在此过程中，它还运行称为生命周期挂钩的函数，让用户有机会在特定阶段添加自己的代码。

考虑到这一点，我们有：

创建前

beforeCreate 钩子在组件初始化时运行。数据尚未反应，事件尚未设置。

用法

当您需要某种不需要分配给数据的逻辑/API 调用时，使用 beforeCreate 挂钩非常有用。因为如果我们现在给数据分配一些东西，一旦状态被初始化，它就会丢失。

创建

您可以使用 created 钩子访问活跃的反应数据和事件。模板和虚拟 DOM 尚未安装或渲染。

用法

在处理读取/写入响应式数据时，使用created 方法很有用。例如，如果您想进行 API 调用然后存储该值，那么就可以在这里进行。

---

上述被称为creation 挂钩，而不是mounting 挂钩。

安装挂钩通常是最常用的挂钩。它们允许您在第一次渲染之前和之后立即访问您的组件。但是，它们不会在服务器端渲染期间运行。

安装前

beforeMount 挂钩在初始渲染发生之前以及模板或渲染函数编译之后运行。

用法

这是在流程后期不必要之前执行 API 调用的最后一步，因为它就在创建之后 — 它们可以访问相同的组件变量。

已安装

在挂载的钩子中，您将可以完全访问响应式组件、模板和渲染的 DOM（通过 this.$el）。

用法

使用mounted 来修改DOM——尤其是在集成非Vue 库时。

---

还有一些钩子，称为updating钩子。

每当您的组件使用的反应性属性发生更改或其他原因导致它重新呈现时，都会调用更新挂钩。它们允许您连接到组件的 watch-compute-render 循环。

如果您需要知道组件何时重新渲染（可能是为了调试或分析），请使用更新挂钩。

有：

更新前

beforeUpdate 挂钩在组件上的数据更改之后运行，更新周期开始，就在 DOM 被修补和重新渲染之前。

用法

如果您需要在组件实际呈现之前获取组件上任何反应性数据的新状态，请使用 beforeUpdate。

更新

更新后的钩子在您的组件发生数据更改并且 DOM 重新渲染后运行。

用法

如果您需要在属性更改后访问 DOM，请使用 updated

---

最后但同样重要的是，还有 destruction 钩子。

销毁挂钩允许您在组件被销毁时执行操作，例如清理或分析发送。当您的组件被拆除并从 DOM 中移除时，它们会触发。

有：

销毁

当你到达被破坏的钩子时，你的组件上几乎没有任何东西。附着在它上面的所有东西都被摧毁了。

用法

如果您需要在最后一刻进行清理或通知远程服务器该组件已被销毁，请使用destroy

销毁前

beforeDestroy 在拆卸前被解雇。您的组件仍将完全存在并正常运行。

用法

如果您需要清理事件或响应式订阅，请使用 beforeDestroy。

这是您可以进行资源管理、删除变量和清理组件的阶段。

---

请记住，这些是主要的生命周期钩子，还有一些其他次要的钩子，例如 activated 和 deactivated，您可以查看它们。

Here 是一个链接，可能会帮助您更进一步。