Vue.js 的生命周期

Vue.js 的生命周期钩子函数是一组在 Vue 实例生命周期中执行的函数，它们允许你在特定阶段执行自定义逻辑。以下是 Vue.js 的生命周期钩子函数以及它们在生命周期中的执行时机：

1、beforeCreate:

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
不能访问 data 和 methods 中的数据和方法。

2、created:

在实例创建完成后被立即调用。
可以访问 data 和 methods。
通常用于数据初始化、异步操作等。

3、beforeMount:

在挂载开始之前被调用：相关的 render 函数首次被调用。
可以访问 el 属性，但挂载并未开始。

4、mounted:

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
可以访问 el。
通常用于 DOM 操作、发起网络请求等。

5、beforeUpdate:

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
可以在该钩子中对数据进行操作，但避免触发更新循环。

6、updated:

由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
可以访问更新后的 DOM。
通常用于操作更新后的 DOM，如调用第三方库、手动移动焦点等。

7、beforeDestroy:

实例销毁之前调用。在这一步，实例仍然完全可用。
可以在该钩子中进行清理操作，如清除定时器、取消订阅等。

8、destroyed:

实例销毁之后调用。此时，所有事件监听器都已被移除，所有子实例也已经被销毁。
通常用于清理无效的定时器、解绑全局事件等。

9、activated (仅适用于 keep-alive 组件):

被 keep-alive 缓存的组件激活时调用。

10、deactivated (仅适用于 keep-alive 组件):

被 keep-alive 缓存的组件停用时调用。
这些生命周期钩子函数提供了在不同阶段执行自定义逻辑的机会，使你能够更好地理解和控制 Vue 实例的行为。

代码007普通

打赏 收藏 海报 链接