关于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 1430
概念 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 作用 在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间，提高用户体验性 参数 　　Keep-alive 组件提供了include和exclude两个属性，允许组件有条件的进行缓存。 include: 字符串或正则表达式。只有匹配的组...
vue 中的 keep-alive
weixin_39111384的博客
12-28 5304
一、什么是 Keep-alive keep-alive 是 vue 中的内置组件，能够在组件切换过程中将状态保留在内存中，防止重复的渲染 DOM； keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们； keep-alive 可以设置一下 props 属性： include - 字符串或者是正则表达式。只有名称匹配的组件才能被缓存 exclude - 字符串或者是正则表达式。 max - 数字。最多可以缓存多少组件实例。 关于 keep-alive 的基本用法 <keep-
对 keep-alive 的理解，使用场景以及存在的问题
小草莓的博客
07-06 4943
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 1030
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 5676
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
大转转FE
11-26 896
一、什么是keep-alive？官方介绍就是：<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition>相似，...
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-16
根据提供的文件信息，以下是关于Vue中keep-alive组件缓存动态删除的知识点详细说明： 首先，什么是Vue中的keep-alive组件呢？keep-alive是Vue提供的一个抽象组件，它主要用于缓存动态组件，避免组件切换过程中导致...
理解vue中组件的缓存（keep-alive）（详细总结）
接着奏乐接着舞的博客
08-22 5754
介绍了keepAlive的使用，以及如何强制组件刷新，最后是实际工作中容易遇见的问题
Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
油墨香^-^的博客
03-27 549
Vue提供了很多钩子，但很多钩子我们几乎不会用到，只有清楚这些钩子函数的触发顺序以及背后的一些限制等，这样我们才能够正确的使用这些钩子，希望看了本文的同学，能对这些钩子有更加清晰的认识，使用起来更加得心应手。参考资料：Vue文档keep-alive的深入理解与使用(配合router-view缓存整个路由页面)
Vue中 keep-alive
zyx042299的博客
12-06 119
Vue中 keep-alive
VUE：keep-alive的两个钩子函数activated与deactivated activated不触发 deactivated不触发
qq_38402659的博客
05-14 6673
如下转自Vue官网：https://cn.vuejs.org/ activated 类型：func 触发时机：keep-alive组件激活时使用； deactivated 类型：func 触发时机：keep-alive组件停用时调用；
vue中的钩子函数
shenlichuang的博客
07-06 1196
在开发一般的业务来说，不需要知道 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
vue3keep-alive的钩子函数
11-16
这两个钩子函数分别在被包含在`<keep-alive>`中的组件被激活和停用时执行。除此之外，`<keep-alive>`组件还提供了其他的生命周期钩子函数，包括`onBeforeMount()`、`onMounted()`、`onBeforeUpdate()`、`onUpdated()...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值