本文介绍: Vue.js 的生命周期钩子函数是一组在 Vue 实例生命周期执行的函数,它们允许你在特定阶段执行自定义逻辑。在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。这些生命周期钩子函数提供了在不同阶段执行自定义逻辑的机会,使你能够更好地理解和控制 Vue 实例行为el 被新创建vm.$el 替换,并挂载实例上去之后调用该钩子。在挂载开始之前被调用:相关的 render 函数首次被调用。被 keepalive 缓存组件激活时调用

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

原文地址:https://blog.csdn.net/weixin_43160662/article/details/134678653

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_5297.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注