vue3.0(十四)内置组件KeepAlive

文章目录

  • 一、KeepAlive是什么
    • 1.KeepAlive的props属性
    • 2.KeepAlive的生命周期
  • 二、使用场景
  • 三、源码
  • 四、缓存后如何获取数据

一、KeepAlive是什么

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive 保持组件活跃，不会被destroy销毁掉，就一直还活着，组件没有被销毁掉的话，组件上挂载的数据就还存在，所以状态就可以保留，所以，keep-alive就可以保持组件的状态。

http协议的请求头里面也有一个keep-alive，保持http通话，这样：Connection: keep-alive 功能虽然不一样，但是思想上是一样的即为~保持状态活跃

1.KeepAlive的props属性

prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组。

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存
    <!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b"><component :is="view" />
</KeepAlive><!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/"><component :is="view" />
</KeepAlive><!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']"><component :is="view" />
</KeepAlive>
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
在这里插入代码片
  • max - 数字。最多可以缓存多少组件实例

如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

<KeepAlive :max="10"><component :is="activeComponent" />
</KeepAlive>

注：1. 是根据组件的 name 选项进行匹配，所以组件想要条件性地被 KeepAlive 缓存，必须显式声明一个 name 选项。
注：2. 在 3.2.34 或以上的版本中，使用

2.KeepAlive的生命周期

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

  1. onActivated 当组件被激活（使用）的时候触发 可以简单理解为进入这个页面的时候触发
  2. 当组件不被使用（inactive状态）的时候触发 可以简单理解为离开这个页面的时候触发
    <script setup>
import { onActivated, onDeactivated } from 'vue'onActivated(() => {// 调用时机为首次挂载// 以及每次从缓存中被重新插入时
})onDeactivated(() => {// 在从 DOM 上移除、进入缓存// 以及组件卸载时调用
})
</script>

请注意：

  • onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。

  • onActivated 和 onDeactivated 钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件。

    keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：

    • 首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > … … > beforeRouteLeave > deactivated
    • 再次进入组件时：beforeRouteEnter >activated > … … > beforeRouteLeave > deactivated

二、使用场景

  1. 切换tab，进行缓存，但又希望可以刷新数据
    解决办法：
    • 给用户机会触发刷新，增加下拉加载刷新事件
    • 将获取数据的操作写在activated步骤
  2. 前进刷新，后退缓存用户浏览数据
    • 搜索页面 => 到搜索结果页时，搜索结果页面要重新获取数据，
    • 搜索结果页面 => 点击进入详情页 => 从详情页返回列表页时，要保存上次已经加载的数据和自动还原上次的浏览位置。
      	<keep-alive> <router-view v-if="useRoute.meta.keepAlive"/> </keep-alive> <router-view v-if="!useRoute.meta.keepAlive"/>// list是我们的搜索结果页面 // router.js{path: '/list',name: 'List',component: List,meta: {isUseCache: false, // 默认不缓存keepAlive: true  // 是否使用 keep-alive}}// 组件中运用routeimport { useRoute } from 'vue-router';const useRoute = useRoute ();let list = ref([]); // list组件的activated钩子activated() { //isUseCache为false时才重新刷新获取数据//因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的 if(!useRoute.meta.isUseCache){ list.value = []; // 清空原有数据onLoad(); // 舒心数据} useRoute.meta.isUseCache = false // 通过这个控制刷新},// list组件的beforeRouteLeave钩子函数// 跳转到详情页时，设置需要缓存 => beforeRouterLeave：离开当前路由时 => 导航在离开该组件的对应路由时调用，可以访问组件实例 用来禁止用户离开，比如还未保存草稿，或者在用户离开前把定时器销毁beforeRouteLeave(to, from, next){if(to.name=='Detail'){from.meta.isUseCache = true}next()}
  3. 事件绑定了很多次，比如上传点击input监听change事件，突然显示了多张相同图片的问题
    也就是说，DOM在编译后就缓存在内容中了，如果再次进入还再进行事件绑定初始化则就会发生这个问题

解决办法： 在mounted中绑定事件，因为这个只执行一次，并且DOM已准备好。如果插件绑定后还要再执行一下事件的handler函数的话，那就提取出来，放在activated中执行。比如：根据输入内容自动增长textarea的高度，这部分需要监听textarea的input和change事件，并且页面进入后还要再次执行一次handler函数，更新textarea高度（避免上次输入的影响）。

三、源码

keep-alive是vue中内置的一个组件

	const getCurrentInstance = () => currentInstance || currentRenderingInstance;const KeepAliveImpl = {name: `KeepAlive`,//用于在渲染器内部进行特殊处理的标记。我们没有使用===//在渲染器中直接选中KeepAlive，因为直接导入//可以防止它被tree-shaken。__isKeepAlive: true,props: {include: [String, RegExp, Array],exclude: [String, RegExp, Array],max: [String, Number]},setup(props, { slots }) {const instance = getCurrentInstance();// KeepAlive communicates with the instantiated renderer via the// ctx where the renderer passes in its internals,// and the KeepAlive instance exposes activate/deactivate implementations.// The whole point of this is to avoid importing KeepAlive directly in the// renderer to facilitate tree-shaking.const sharedContext = instance.ctx;// if the internal renderer is not registered, it indicates that this is server-side rendering,// for KeepAlive, we just need to render its childrenif (!sharedContext.renderer) {return slots.default;}const cache = new Map();const keys = new Set();let current = null;{instance.__v_cache = cache;}const parentSuspense = instance.suspense;const { renderer: { p: patch, m: move, um: _unmount, o: { createElement } } } = sharedContext;const storageContainer = createElement('div');sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {const instance = vnode.component;move(vnode, container, anchor, 0 /* ENTER */, parentSuspense);// in case props have changedpatch(instance.vnode, vnode, container, anchor, instance, parentSuspense, isSVG, vnode.slotScopeIds, optimized);queuePostRenderEffect(() => {instance.isDeactivated = false;if (instance.a) {invokeArrayFns(instance.a);}const vnodeHook = vnode.props && vnode.props.onVnodeMounted;if (vnodeHook) {invokeVNodeHook(vnodeHook, instance.parent, vnode);}}, parentSuspense);{// Update components treedevtoolsComponentAdded(instance);}};sharedContext.deactivate = (vnode) => {const instance = vnode.component;move(vnode, storageContainer, null, 1 /* LEAVE */, parentSuspense);queuePostRenderEffect(() => {if (instance.da) {invokeArrayFns(instance.da);}const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;if (vnodeHook) {invokeVNodeHook(vnodeHook, instance.parent, vnode);}instance.isDeactivated = true;}, parentSuspense);{// Update components treedevtoolsComponentAdded(instance);}};function unmount(vnode) {// reset the shapeFlag so it can be properly unmountedresetShapeFlag(vnode);_unmount(vnode, instance, parentSuspense);}function pruneCache(filter) {cache.forEach((vnode, key) => {const name = getComponentName(vnode.type);if (name && (!filter || !filter(name))) {pruneCacheEntry(key);}});}function pruneCacheEntry(key) {const cached = cache.get(key);if (!current || cached.type !== current.type) {unmount(cached);}else if (current) {// current active instance should no longer be kept-alive.// we can't unmount it now but it might be later, so reset its flag now.resetShapeFlag(current);}cache.delete(key);keys.delete(key);}// prune cache on include/exclude prop changewatch(() => [props.include, props.exclude], ([include, exclude]) => {include && pruneCache(name => matches(include, name));exclude && pruneCache(name => !matches(exclude, name));}, // prune post-render after `current` has been updated{ flush: 'post', deep: true });// cache sub tree after renderlet pendingCacheKey = null;const cacheSubtree = () => {// fix #1621, the pendingCacheKey could be 0if (pendingCacheKey != null) {cache.set(pendingCacheKey, getInnerChild(instance.subTree));}};onMounted(cacheSubtree);onUpdated(cacheSubtree);onBeforeUnmount(() => {cache.forEach(cached => {const { subTree, suspense } = instance;const vnode = getInnerChild(subTree);if (cached.type === vnode.type) {// current instance will be unmounted as part of keep-alive's unmountresetShapeFlag(vnode);// but invoke its deactivated hook hereconst da = vnode.component.da;da && queuePostRenderEffect(da, suspense);return;}unmount(cached);});});return () => {pendingCacheKey = null;if (!slots.default) {return null;}const children = slots.default();const rawVNode = children[0];if (children.length > 1) {{warn$1(`KeepAlive should contain exactly one component child.`);}current = null;return children;}else if (!isVNode(rawVNode) ||(!(rawVNode.shapeFlag & 4 /* STATEFUL_COMPONENT */) &&!(rawVNode.shapeFlag & 128 /* SUSPENSE */))) {current = null;return rawVNode;}let vnode = getInnerChild(rawVNode);const comp = vnode.type;// for async components, name check should be based in its loaded// inner component if availableconst name = getComponentName(isAsyncWrapper(vnode)? vnode.type.__asyncResolved || {}: comp);const { include, exclude, max } = props;if ((include && (!name || !matches(include, name))) ||(exclude && name && matches(exclude, name))) {current = vnode;return rawVNode;}const key = vnode.key == null ? comp : vnode.key;const cachedVNode = cache.get(key);// clone vnode if it's reused because we are going to mutate itif (vnode.el) {vnode = cloneVNode(vnode);if (rawVNode.shapeFlag & 128 /* SUSPENSE */) {rawVNode.ssContent = vnode;}}// #1513 it's possible for the returned vnode to be cloned due to attr// fallthrough or scopeId, so the vnode here may not be the final vnode// that is mounted. Instead of caching it directly, we store the pending// key and cache `instance.subTree` (the normalized vnode) in// beforeMount/beforeUpdate hooks.pendingCacheKey = key;if (cachedVNode) {// copy over mounted statevnode.el = cachedVNode.el;vnode.component = cachedVNode.component;if (vnode.transition) {// recursively update transition hooks on subTreesetTransitionHooks(vnode, vnode.transition);}// avoid vnode being mounted as freshvnode.shapeFlag |= 512 /* COMPONENT_KEPT_ALIVE */;// make this key the freshestkeys.delete(key);keys.add(key);}else {keys.add(key);// prune oldest entryif (max && keys.size > parseInt(max, 10)) {pruneCacheEntry(keys.values().next().value);}}// avoid vnode being unmountedvnode.shapeFlag |= 256 /* COMPONENT_SHOULD_KEEP_ALIVE */;current = vnode;return rawVNode;};}};const KeepAlive = KeepAliveImpl;

注意：服务器端渲染期间avtived不被调用

四、缓存后如何获取数据

解决方案可以有以下两种：

  • beforeRouteEnter
  • actived
    beforeRouteEnter
    每次组件渲染的时候，都会执行beforeRouteEnter
    beforeRouteEnter(to, from, next){next(vm=>{console.log(vm)// 每次进入路由执行vm.getData()  // 获取数据})
},
    actived
    在keep-alive缓存的组件被激活的时候，都会执行actived钩子
    activated(){this.getData() // 获取数据
},

注意：服务器端渲染期间avtived不被调用

到此这篇关于vue中的keep-alive详解与应用场景的文章就介绍到这了,更多相关vue keep-alive内容请

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/30810.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

短剧app对接广告联盟流量变现开发 搭建

短剧app对接广告联盟流量变现开发 搭建

短剧APP对接广告联盟以实现流量变现的开发和搭建是一个综合性的过程&#xff0c;涉及多个关键步骤和要素。以下是一个大致的指南&#xff1a; 确定目标与定位&#xff1a; 明确短剧APP的目标受众是谁&#xff0c;以及其主要定位是什么&#xff0c;例如是提供原创短剧内容&#…
阅读更多...
使用 C# 进行面向对象编程：第 9 部分

使用 C# 进行面向对象编程：第 9 部分

使用 OOP 的用户活动日志 应用程序背后的关键概念 在这一部分中&#xff0c;我们将使用之前学到的一些 OOP 概念。我们将创建一个小型应用程序。在继续之前&#xff0c;请阅读我的文章user-activity-log-using-C-Sharp-with-sql-server/。在本课程中&#xff0c;我们将再次使…
阅读更多...
国内公开数据

国内公开数据

以下是一些关于国内政府部门公布的数据或互联网上开放数据的资源&#xff0c;包括CSV、JSON和Parquet格式&#xff1a; 国内政府部门公开数据 中国政府数据开放平台 链接: 数据开放平台概要: 提供来自中国各级政府的公开数据集&#xff0c;数据格式包括CSV、JSON等。 上海市公…
阅读更多...
2024年燃气企业负责人和安全管理人员考试题库。

2024年燃气企业负责人和安全管理人员考试题库。

31.使用&#xff08; &#xff09;进行液化天然气(LNG)的输送&#xff0c;对于卸、装车可以缩短卸、装车时间&#xff0c;提高输送效率。 A.低温泵 B.增压器 C.减压器 答案:A 32.液化天然气(LNG)用作调峰气源时&#xff0c;应注意与原燃气的&#xff08; &#xff09;&…
阅读更多...
测试人员遇到需求变更 4大处理技巧

测试人员遇到需求变更 4大处理技巧

测试人员有效的需求变更管理&#xff0c;可以确保即使在需求频繁变化的情况下&#xff0c;测试工作仍然能够覆盖所有必要的功能点&#xff0c;从而保障最终产品的质量。如果没有合理的需求变更处理技巧&#xff0c;可能会造成不必要的返工和重复测试&#xff0c;无法维持项目的…
阅读更多...
平安养老险浙江分公司开展防范非法集资宣传，守护群众“钱袋子”

平安养老险浙江分公司开展防范非法集资宣传，守护群众“钱袋子”

为进一步提高群众对非法集资的防范意识的鉴别能力&#xff0c;近期&#xff0c;平安养老保险股份有限&#xff08;以下简称“平安养老险”&#xff09;浙江分公司以“守住钱袋子、护好幸福家”为宣传主题&#xff0c;深入居民社区、办公职场等公共场所开展的宣传活动。 平安养老…
阅读更多...
排序题目：有序数组的平方

排序题目：有序数组的平方

文章目录 题目标题和出处难度题目描述要求示例数据范围进阶 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;有序数组的平方 出处&#xff1a;977. 有序数组的平方 难度 2 级 题目描述 要求 给定按非递减顺序排序的整…
阅读更多...
看完再买不后悔！希喂、小米、霍尼韦尔宠物空气净化器性价比比拼

看完再买不后悔！希喂、小米、霍尼韦尔宠物空气净化器性价比比拼

在忙碌的工作之余&#xff0c;养一只猫真的能治愈一切的不快&#xff0c;让我们的心灵得到片刻的宁静。然而&#xff0c;这份宁静背后&#xff0c;却隐藏着一些不易察觉的烦恼——猫浮毛和异味。 猫浮毛&#xff0c;这个看似微不足道的小问题&#xff0c;实则给许多宠物主人带…
阅读更多...
PS选不了颜色和路径描边？PS不知为何才能描边任意路径，这个办法让你秒懂

PS选不了颜色和路径描边？PS不知为何才能描边任意路径，这个办法让你秒懂

在选中路径的情况下&#xff0c;按图下操作&#xff0c;即可制作路径&#xff08;不会让你选不了颜色和路径描边&#xff09;
阅读更多...
第4章 工程经济评价指标 作业

第4章 工程经济评价指标 作业

第4章 工程经济评价指标 作业 一单选题&#xff08;共27题&#xff0c;100分&#xff09; (单选题)利息备付率是指( )与应付利息费用的比值。 A. 息税前利润 B. 利润总额 C. 净利润 D. 营业收入 正确答案: A:息税前利润; (单选题)当净现值( )0时,该项目不可行。 A. < B. …
阅读更多...
leetcode:557. 反转字符串中的单词 III（python3解法）

leetcode:557. 反转字符串中的单词 III（python3解法）

难度&#xff1a;简单 给定一个字符串 s &#xff0c;你需要反转字符串中每个单词的字符顺序&#xff0c;同时仍保留空格和单词的初始顺序。 示例 1&#xff1a; 输入&#xff1a;s "Lets take LeetCode contest" 输出&#xff1a;"steL ekat edoCteeL tsetnoc…
阅读更多...
分布式光纤测温DTS使用的单模光纤与多模光纤有何区别？

分布式光纤测温DTS使用的单模光纤与多模光纤有何区别？

分布式光纤测温DTS中使用的单模光纤和多模光纤之间存在着本质区别。单模光纤是一种在光纤通信中应用广泛的光纤类型&#xff0c;几乎所有的光纤入户和主干线通信都采用单模光纤。从通信的角度来看&#xff0c;单模光纤就好比一条单行道的高速铁路&#xff0c;而多模光纤则类似于…
阅读更多...
Leetcode - 周赛401

Leetcode - 周赛401

目录 一&#xff0c;3178. 找出 K 秒后拿着球的孩子 二&#xff0c;3179. K 秒后第 N 个元素的值 三&#xff0c;3180. 执行操作可获得的最大总奖励 I 四&#xff0c;3181. 执行操作可获得的最大总奖励 II 一&#xff0c;3178. 找出 K 秒后拿着球的孩子 本题可以直接模拟&a…
阅读更多...
新手必读：平面设计自学全攻略

新手必读：平面设计自学全攻略

据说平面设计的门槛很低&#xff0c;零基础也很容易上手。但是据我所知许多初学者在自学平面设计时面临以下瓶颈&#xff1a;为什么跟着大神自学平面设计帖子依旧学不会呢&#xff0c;明明报了许多平面设计自学课程&#xff0c;但仍然不会自主设计&#xff0c;初学者到底从哪里…
阅读更多...
XMind 2024软件最新版下载及详细安装教程

XMind 2024软件最新版下载及详细安装教程

​人所共知的是XMind 在公司和教育领域都有很广泛的应用&#xff0c;在公司中它能够用来进行会议管理、项目管理、信息管理、计划和XMind 被认为是一种新一代演示软件的模式。也就是说XMind不仅能够绘制思维导图&#xff0c;还能够绘制鱼骨图、二维图、树形图、逻辑图、组织结构…
阅读更多...
数字乡村：绘就乡村振兴的智慧新画卷

数字乡村：绘就乡村振兴的智慧新画卷

在乡村振兴战略的宏伟蓝图下&#xff0c;“数字乡村”作为新时代农村现代化的重要抓手&#xff0c;正悄然改变着中国乡村的面貌。本文旨在深度剖析数字乡村建设的核心价值、关键技术、成功案例以及未来展望&#xff0c;为乡村振兴战略提供前瞻性的思考与启示。 数字乡村的核心价…
阅读更多...
SAP PI/PO获取文件名及路径

SAP PI/PO获取文件名及路径

Sender Adapter设置如下&#xff1a; UDF定义如下&#xff1a; DynamicConfiguration conf (DynamicConfiguration) container.getTransformationParameters().get(StreamTransformationConstants.DYNAMIC_CONFIGURATION); //get file name DynamicConfigurationKey keyFile…
阅读更多...
Rust 学习方法及学习路线汇总

Rust 学习方法及学习路线汇总

Rust 学习方法及学习路线汇总 Rust 是一种系统编程语言&#xff0c;旨在提供安全性、并发性和高性能。它是由 Mozilla 公司开发的&#xff0c;于 2010 年首次发布。Rust 能够帮助开发者编写可靠和高效的软件&#xff0c;因此受到了广泛的关注和认可。 如果你有兴趣学习 Rust&…
阅读更多...
什么是Amazon Relational Database Service（Amazon RDS）及实践体验

什么是Amazon Relational Database Service（Amazon RDS）及实践体验

目录 前言亚马逊云服务免费体验中心三种优惠类型 Amazon RDS什么是Amazon RDS为什么选择 Amazon RDS&#xff1f;Amazon RDS 的优势关键功能详情工作原理Amazon RDSAmazon RDS CustomAmazon RDS on Amazon Outposts 实践创建并连接到 MySQL 数据库实例一、创建 EC2 实例二、创建…
阅读更多...
SpringCloudAlibaba组件之间的版本兼容问题

SpringCloudAlibaba组件之间的版本兼容问题

我之前的SpringCloud项目以及使用的组件的版本是这些 但是我不知道具体的版本兼容问题&#xff0c;以及各种组件之间对应的版本 想要使用我们的springcloud和springcloudAlibaba组件&#xff0c;我们就要版本对应&#xff0c;不然就是一堆依赖报错&#xff0c;要不就是缺了这个…
阅读更多...
最新文章

Copyright @ 2022~2023