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

What is the use case for each vue.js life cycle hooks?

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

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

创建挂钩

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

安装挂钩

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

更新挂钩

  1. beforeUpdate():在数据更改后和 DOM 重新呈现之前运行 --- 用例??
  2. updated():在数据更改并且 DOM 重新呈现后运行 --- 用例 ??

销毁挂钩

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

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

根据 VueJS 官方网站:

Each Vue instance goes through a series of initialization steps when it’s created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.

考虑到这一点,我们有:

创建前

beforeCreate 挂钩 运行 在您的组件初始化时。数据尚未反应,事件尚未设置。

用法

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

已创建

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

用法

使用created 方法在处理reading/writing 反应数据时很有用。例如,如果您想进行 API 调用然后存储该值,这就是执行此操作的地方。


以上被称为 creation 钩子,而不是 mounting 钩子。

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

挂载前

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

用法

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

已安装

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

用法

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


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

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

如果您需要知道组件何时重新呈现(可能用于调试或分析),请使用更新挂钩。

有:

更新前

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

用法

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

已更新

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

用法

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


最后但同样重要的是,有 destruction 个挂钩。

销毁挂钩允许您在销毁组件时执行操作,例如清理或分析发送。当您的组件被拆除并从 DOM.

中移除时,它们会触发

有:

摧毁

当你到达 destroyed 钩子时,你的组件上几乎什么都没有了。附着在它上面的所有东西都被摧毁了。

用法

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

毁灭前

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

用法

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

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


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

Here 是一个 link,可能会帮助您进一步发展。