关于vue中的keep-alive的两个钩子函数

最新推荐文章于 2024-06-13 17:19:27 发布
最新推荐文章于 2024-06-13 17:19:27 发布
阅读量3.8k 收藏 11
点赞数 1
分类专栏： 疑难杂症 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33010549/article/details/107360329
版权

activated

类型：func

触发时机：keep-alive组件激活时使用；

deactivated

类型：func

触发时机：keep-alive组件停用时调用；

这两个钩子函数在普通的组件当中是不存在的，只有当组件被keep-alive缓存的时候才会有。可以用来解决再次进入页面的触发。

沈阿金
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
keep-alive
weixin_57983561的博客
06-01 1410
概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用 在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间，提高用户体验性 参数 　　Keep-alive 组件提供了include和exclude两个属性，允许组件有条件的进行缓存。 include: 字符串或正则表达式。只有匹配的组...
Vue中 keep-alive
zyx042299的博客
12-06 115
Vue中 keep-alive
对 keep-alive 的理解，使用场景以及存在的问题
小草莓的博客
07-06 4697
include(包含的组件缓存) 、 exclude(排除的组件不缓存，优先级大于include) 、max(最大缓存数，内部采用lru算法用于维护缓存列表)若用 keep-alive 包住A组件和B组件，从A组件跳转到B组件，在哪里更新B组件页面的数据？② exclude - 字符串或正则表达式，任何名称name匹配的组件都不会被缓存。，缓存的组件重新进入不会再触发created生命周期中的方法，因此数据不会更新。③ max - 缓存的最大个数（如果超过最大缓存个数，则移除最先缓存的组件）
vue 生命周期 钩子函数 keep-alive activated deactivated
最新发布
global_coding的博客
06-13 911
vue 生命周期 钩子函数 keep-alive activated deactivated
vue中keep-alive、activated的探讨和使用
热门推荐
qq_38861711的博客
08-02 3万+
在修改公司的一个项目的时候发现了activated这个东西，一直觉得很疑惑，之前也没怎么用过啊！官网的生命周期那也没说过这东西啊！生命周期不就create mount update 和destory这几个东东么，怎么多了个activate出来。 百思不得其解，于是去问了下度娘和查了下文档！恍然大悟，原来这东东是结合keep-alive这东东使用的，下面顺便记录一下。   keep-ali.........
vue中keep-alive的include、exclude两个属性--避坑 和使用2个钩子函数activated、deactivated
一家外包公司的码农，专职前端开发
02-08 5658
keep-alive用法简介：我们在切换路由的时候，上一个页面就会被销毁，新的页面也会被创建，keep-alive它可以缓存组件，防止组件销毁，也就是说，我们在进行路由切换时，上次访问的页面数据依然存在，不会进行销毁。 普通用法： 只需要用keep-alive把需要缓存的组件包裹即可： <keep-alive> <router-view></router-view> </keep-alive> include属性：字符串或正则表达式。
vue的keep-alive和生命周期钩子函数
HANGSOME123的博客
07-24 1万+
1.keep-alive的生命周期 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。 2.基本用法 可以将 是否包裹 keep-alive 通过参数配置； <keep-alive> <ro...
vue组件 keep-alive 和 transition 使用详解
01-19
当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。 ...
vue中keep-alive内置组件缓存的实例代码
01-19
需求： home 组件中有一个 name 的 data 数据。这个数据修改之后，再切换到其他的组件。再切换到 home 组件，...3. 会多出两个生命周期的钩子函数 a. activated 缓存激活 第一次会触发、组件能被看到 一般根 created
vue keep-alive请求数据的方法示例
08-27
Vue Keep-Alive 是 Vue 框架中的一个功能强大且实用的机制，可以缓存组件的状态，减少不必要的组件重渲染，提高应用程序的性能。但是，在使用 Keep-Alive 时，可能会遇到一些问题，例如请求数据的方法示例、keep-...
Vue中keep-alive组件的深入理解
10-14
Vue中的`<keep-alive>`组件是一个特殊类型的组件，用于在Vue应用中缓存组件实例，避免组件在切换路由或状态变化时被销毁并重新创建。这有助于保持组件的状态，提高用户体验，尤其是在处理大量数据或者频繁切换的组件...
理解vue中组件的缓存（keep-alive）（详细总结）
接着奏乐接着舞的博客
08-22 5623
介绍了keepAlive的使用，以及如何强制组件刷新，最后是实际工作中容易遇见的问题
Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
油墨香^-^的博客
03-27 539
Vue提供了很多钩子，但很多钩子我们几乎不会用到，只有清楚这些钩子函数的触发顺序以及背后的一些限制等，这样我们才能够正确的使用这些钩子，希望看了本文的同学，能对这些钩子有更加清晰的认识，使用起来更加得心应手。参考资料：Vue文档keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
VUE：keep-alive的两个钩子函数activated与deactivated activated不触发 deactivated不触发
qq_38402659的博客
05-14 6659
如下转自Vue官网：https://cn.vuejs.org/ activated 类型：func 触发时机：keep-alive组件激活时使用； deactivated 类型：func 触发时机：keep-alive组件停用时调用；
vue中的钩子函数
shenlichuang的博客
07-06 1187
在开发一般的业务来说，不需要知道 Vue 中钩子函数过多的执行细节。但是如果你想写出足够稳健的代码，或者想开发一些通用库，那么就少不了要深入了解各种钩子的执行时机了。 组件生命周期 hook 在组件树中的调用时机 先直接看一个例子： import Vue from 'vue'; Vue.component('Test', { props: { name: String }, template: `<div class="test">{{ name }}<.
Vue中keep-alive原理
庸人方自扰，自在就好
06-29 1万+
keep-alive是用来缓存组件的，比如我们有个列表页，在点击详情页之后，如果返回之后不想刷新列表页，就可以用keep-alive组件进行缓存。除此以外，还有很多应用场景。用法1：我们想要缓存某个组件，只要用keep-alive组件将其包裹就行。 用法2：包裹component组件缓存动态组件，或者包裹router-view缓存路由页面，也就是keep-alive配合路由守卫（元信息）实现缓存。比如常在router.js路由表里定义好哪些页面需要缓存，就可以通过下面这样实现了： 属性 include
keepalive钩子执行顺序
fghrygfhd5的博客
01-05 1113
钩子函数的执行顺序 不使用keep-alive beforeRouteEnter --> created --> mounted --> destroyed 使用keep-alive beforeRouteEnter --> created --> mounted --> activated --> deactivated 再次进入缓存的页面，只会触发beforeRouteEnter -->activated --&g..
vue中keep-alive两个属性的用法及注意问题
阡*-*陌的博客
12-13 1985
在使用keep-alive时我们只想让其中一个组件缓存，另一个不会缓存。怎么办呢？？？ 因此为keep-alive提供了两个属性： include 值为字符串或者正则表达式匹配的组件name会被缓存。 exclude 值为字符串或正则表达式匹配的组件name不会被缓存。 exclude属性 比 include属性优先级更高。 请注意： include和exclude两个属性匹配的是组件中的name名称，而不是路由中的name名称。 <keep-alive include="Hom
配置keepalived ping不通 解决办法
石头
08-01 5105
vim /etc/keepalived/keepalived.conf 把这个注释就可以了 vrrp_strict # global_defs { notification_email { acassen@firewall.loc failover@firewall.loc sysadmin@firewall.loc } no...
vue3keep-alive的钩子函数
11-16
Vue3中，`<keep-alive>`组件提供了一些新的生命周期钩子函数，包括`onActivated()`和`onDeactivated()`。这两个钩子函数分别在被包含在`<keep-alive>`中的组件被激活和停用时执行。除此之外，`<keep-alive>`组件还提供了其他的生命周期钩子函数，包括`onBeforeMount()`、`onMounted()`、`onBeforeUpdate()`、`onUpdated()`、`onBeforeUnmount()`、`onUnmounted()`和`onErrorCaptured()`。这些钩子函数的作用和Vue2.x中的生命周期钩子函数类似，可以用于在组件的不同生命周期阶段执行一些操作。 下面是一个示例代码，演示了如何在Vue3中使用`<keep-alive>`组件和其生命周期钩子函数： ```html <template> <div> <button @click="toggleComponent">Toggle Component</button> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template> <script> import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue' export default { components: { ComponentA, ComponentB }, data() { return { currentComponent: 'ComponentA' } }, methods: { toggleComponent() { this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA' } }, // 生命周期钩子函数 onActivated() { console.log('Component activated') }, onDeactivated() { console.log('Component deactivated') } } </script> ``` 在这个示例中，我们定义了两个组件`ComponentA`和`ComponentB`，并在父组件中使用`<keep-alive>`组件包裹这两个组件。当点击按钮时，父组件会切换当前显示的子组件。同时，我们在父组件中定义了`onActivated()`和`onDeactivated()`两个生命周期钩子函数，用于在子组件被激活和停用时输出一些信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值