Vue3中keep-alive缓存组件应用场景。

文章目录


一、KeepAlive是什么?

是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例。

二、基本使用

默认情况下,一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态------当这个组件再一次被显示时,会创建一个只带有初始状态的新实例。

1.例子

有一个简易的切换案例

点击加数字,让后再次点击切换2,回到count组件,发现数字为0了。

在切换时创建新的组件实例通常是有意义的,但在这个例子中,我们的确想要组件能在被"切走"的时候保留它们的状态。要解决这个问题,我们可以用 内置组件将这些动态组件包装起来:

2.keep-alive使用

这样组件就被缓存起来了。

切换数据不会丢失

三、其他属性

3.1 包含/排除

默认会缓存内部的所有组件实例,但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式,或是包含这两种类型的一个数组:

排除缓存组件exclude:这样Count组件的数据就不会缓存。

包含include:包含的组件被缓存。

3.2 最大缓存实例数

我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。 的行为在指定了 max 后类似一个 LRU 缓存:如果缓存的实例数量即将超过指定的那个最大数量,则最久没有被访问的缓存实例将被销毁,以便为新的实例腾出空间。

这里就给出了vue官方文档的示例:

3.3 缓存实例的生命周期

当一个组件实例从 DOM 上移除但因为被 缓存而仍作为组件树的一部分时,它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时,它将重新被激活。

一个持续存在的组件可以通过 onActivated() 和 onDeactivated() 注册相应的两个状态的生命周期钩子:

c 复制代码
<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
})
</script>

注意:onActivated 在组件挂载时也会调用,并且 onDeactivated 在组件卸载时也会调用。

总结

以上就是keep-alive缓存组件的使用了,可以根据自己的实际开发场景来使用。

相关推荐
格调UI成品4 分钟前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl
gnip15 分钟前
微前端框架选型
前端·javascript
芒果12525 分钟前
【转载文章】ECharts-GL 实现世界级、国家级、省市级 3D 地图
前端
一只小风华~35 分钟前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰39 分钟前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清40 分钟前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
KenXu44 分钟前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏1 小时前
React组件中的this指向问题
前端·react.js
程序媛李李李李李蕾1 小时前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端
passer9811 小时前
列表项切换时同步到可视区域
前端