vue内置组件keep-alive以及activated,deactivated生命周期

本文详细介绍了Vue中created、activated和deactivated生命周期钩子的用法。created在Vue实例创建时触发,仅执行一次,适合进行初始数据加载。而activated和deactivated在组件被缓存(通过keep-alive)时触发,分别在进入和离开页面时激活和停用组件,可用于页面数据初始化和清理工作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

created():在创建vue对象时,当html渲染之前就触发;但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次;

activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等;

deactivated():在vue对象存活的情况下,离开当前存在deactivated()函数的页面时,一离开页面就触发;可用于清除定时器等;

activated、deactivated 在当前组件/路由设置了keep-alive时生效。

参考:简书:https://www.jianshu.com/p/0272c0fe9392
转载:优快云:https://blog.youkuaiyun.com/qq_36608921/article/details/82216617

好久不见的朋友们,祝福你们!

### Vue `keep-alive` 组件生命周期详解 #### 额外的生命周期钩子 当组件被 `<keep-alive>` 包裹时,除了标准的生命周期钩子之外,还会获得两个额外的生命周期钩子:`activated` 和 `deactivated`[^1]。 - **`activated`**: 当由 `<keep-alive>` 缓存的组件被激活显示时触发。这意味着每当用户导航回此组件页面或重新展示该组件时,这个方法会被调用。开发者可以在其中处理一些逻辑操作,比如刷新数据或者更新状态等。 - **`deactivated`**: 当由 `<keep-alive>` 缓存的组件失去焦点不再可见时触发。此时可以用来清理定时器、取消网络请求或其他资源释放的工作。 这些新增加的钩子允许开发人员更好地控制那些被缓存起来而不必每次都重新加载的数据和行为,有助于提高应用程序的整体效率并改善用户体验[^3]。 #### 工作流程示例 下面是一段简单的代码片段来说明如何利用这两个新的生命周期事件: ```javascript export default { data() { return { message: 'Hello KeepAlive!' } }, methods: { fetchData() { console.log('Fetching Data...'); // Simulate API call to fetch new messages. setTimeout(() => { this.message = "New Message from Server"; }, 1000); } }, activated() { console.log('Component is now visible and active'); this.fetchData(); // Fetch fresh content when component becomes active again. }, deactivated() { console.log('Component has been hidden or replaced.'); } } ``` 在这个例子中,每次组件变得活跃(`activated`)时都会尝试获取最新的消息;而一旦它失去了活动状态(`deactivated`)则记录下这一变化以便后续可能的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值