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 实例的行为。

11-29 11:24