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

Question

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

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

创建挂钩

1. beforeCreate()：事件和生命周期已经初始化但数据还没有反应---用例？
2. created()：您可以访问反应性数据和事件，但模板和虚拟 DOM 尚未安装或呈现 --- 用例：API 次调用

安装挂钩

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

更新挂钩

1. beforeUpdate()：在数据更改之后和 DOM 重新呈现之前运行——用例？
2. updated()：在数据更改和 DOM 重新呈现后运行——用例？？

破坏钩子

1. beforeDestroy()：在拆卸之前运行 --- 用例：清理以避免 memory 泄漏
2. destroyed()：在拆除后运行——用例？？

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

Answer 1

根据官方 VueJS 网站：

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

考虑到这一点，我们有：

创建前

beforeCreate挂钩在组件初始化时运行。 数据还没有反应，事件还没有设置。

用法

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

创建

您可以访问使用创建的挂钩激活的反应性数据和事件。 模板和虚拟 DOM 尚未安装或渲染。

用法

在处理读取/写入反应数据时，使用created的方法很有用。 例如，如果您想拨打 API 电话，然后存储该值，这就是执行此操作的地方。

---

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

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

挂载前

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

用法

这是您应该执行 API 调用的最后一步，因为它就在创建之后就没有必要了，因为它们可以访问相同的组件变量。

安装

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

用法

使用 mounted 修改 DOM——特别是在集成非 Vue 库时。

---

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

每当组件使用的响应式属性更改或其他原因导致它重新渲染时，都会调用更新挂钩。 它们允许您挂接到组件的监视-计算-渲染周期。

如果您需要知道组件何时重新渲染，可以使用更新挂钩，可能用于调试或分析。

有：

更新前

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

用法

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

更新

更新的挂钩在组件上的数据更改和 DOM 重新呈现后运行。

用法

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

---

最后但并非最不重要的是，有destruction挂钩。

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

有：

毁坏

当您到达 destroyed hook 时，您的组件上几乎没有任何东西。 附着在它上面的一切都被摧毁了。

用法

如果您需要进行任何最后一分钟的清理或通知远程服务器组件已销毁，请使用 destroyed

销毁前

beforeDestroy在拆解之前被触发。 您的组件仍将完全存在并发挥作用。

用法

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

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

---

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

这是一个链接，可以帮助您进一步了解。