vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例

一、什么是 keep-alive

在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。

Keep-Alive是Vue.js中的一个内置组件,它可以用来缓存不活动的组件实例,而不是销毁它们。当Keep-Alive包裹动态组件时,它会将组件的状态保存在内存中,以防止在组件切换过程中重复渲染DOM,从而提高性能和用户体验。Keep-Alive自身不会渲染一个DOM元素,也不会出现在父组件链中。

在Keep-Alive组件中,你可以使用props来控制哪些组件需要被缓存,以及可以缓存多少个组件实例。例如,你可以使用include和exclude props来指定需要缓存的组件名称或正则表达式,以及使用max props来限制最多可以缓存的组件实例数量。

当组件在Keep-Alive内被切换时,它的activated和deactivated生命周期钩子函数将会被对应执行。这意味着当组件从缓存中激活时,activated函数会被调用,而当组件被停用时,deactivated函数会被调用。

优点:
  • 减少页面加载时间,提高页面渲染速度。
  • 缓存已经渲染过的组件,减少内存的占用。
  • 提高用户体验,快速回退之前的组件状态。
  • 节约 HTTP 请求次数,减少服务器压力,提高渲染效率。
缺点:
  • 不利于SEO优化。因为Keep-Alive不会渲染DOM元素,搜索引擎可能无法正确地索引和识别被缓存的组件内容。
  • 可能会增加内存消耗。如果大量组件被缓存,可能会占用大量的内存资源。

因此,在使用Keep-Alive时需要注意权衡其优缺点,根据实际需求和情况做出决策。

二、使用方法:
基本用法:
<!--被keepalive包含的组件会被缓存-->
<keep-alive><component><component />
</keep-alive>
参数:

keepalive 可以接收3个属性做为参数进行匹配对应的组件进行缓存:

  • include 包含的组件(可以为字符串,数组,以及正则表达式,只有匹配的组件会被缓存)
  • exclude 排除的组件(以为字符串,数组,以及正则表达式,任何匹配的组件都不会被缓存)
  • max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

它会根据组件的 name 选项进行匹配,所以组件如果想要条件性地被 KeepAlive 缓存,就必须显式声明一个 name 选项。

其他用法:
<!-- 将(只)缓存组件name为a或者b的组件, 结合动态组件使用 -->
<keep-alive include="a,b"><component></component>
</keep-alive><!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) -->
<keep-alive exclude="c"> <component></component>
</keep-alive><!-- 使用正则表达式,需使用v-bind -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive><!-- 动态判断 -->
<keep-alive :include="includedComponents"><router-view></router-view>
</keep-alive><!-- 如果同时使用include,exclude,那么exclude优先于include, 下面的例子只缓存a组件 -->
<keep-alive include="a,b" exclude="b"> <component></component>
</keep-alive><!-- 如果缓存的组件超过了max设定的值5,那么将删除第一个缓存的组件 -->
<keep-alive exclude="c" max="5"> <component></component>
</keep-alive>
三、生命周期:

被keepalive包含的组件不会被再次初始化,也就意味着不会重走生命周期函数
但是有时候是希望我们缓存的组件可以能够再次进行渲染,这时 Vue 为我们解决了这个问题
被包含在 keep-alive 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated:

  • activated 在首次挂载,以及每次从缓存中被重新插入的时候调用
  • deactivated 在从 DOM 上移除、进入缓存,以及组件卸载时调用
注意:

activated 在组件挂载时也会调用,并且 deactivated 在组件卸载时也会调用。
这两个钩子不仅适用于 缓存的根组件,也适用于缓存树中的后代组件。

生命周期:

页面第一次进入,钩子的触发顺序created-> mounted-> activated,

退出时触发 deactivated
当再次进入(前进或者后退)时,只触发 activated事件挂载的方法等,

只执行一次的放在 mounted 中;
组件每次进去执行的方法放在 activated 中;

export default {mounted(){//只执行一次},activated() {// 每次进去都执行},deactivated() {// 组件卸载时调用}
}
四、缓存页面:

遇见 vue-router 结合router使用,缓存部分页面

所有路径下的视图组件都会被缓存
<keep-alive><router-view><!-- 所有路径匹配到的视图组件都会被缓存! --></router-view>
</keep-alive>
如果只想要router-view里面的某个组件被缓存,怎么办?

1、用 include (exclude例子类似)
缺点:需要知道组件的 name,项目复杂的时候不是很好的选择

<keep-alive include="a"><router-view><!-- 只有路径匹配到的 include 为 a 组件会被缓存 --></router-view>
</keep-alive>

2、使用 meta 属性
优点:不需要例举出需要被缓存组件名称
使用$route.meta的keepAlive属性:

<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

需要在router中设置router的元信息meta:

//...router.js
export default new Router({routes: [{path: '/Hello,',name: 'Hello',component: Hello,meta: {keepAlive: false // 不需要缓存}},{path: '/page1',name: 'Page1',component: Page1,meta: {keepAlive: true // 需要被缓存}}]
})

需要注意的是,include和exclude属性中的组件名字必须是组件定义的name属性值,而不是路由里面定义的名字。

五、拓展使用:

假设这里有 3 个路由: A、B、C。

需求:

默认显示 A
B 跳到 A,A 不刷新
C 跳到 A,A 刷新

实现方式:

1、在 A 路由里面设置 meta 属性:

{path: '/',name: 'A',component: A,meta: {keepAlive: true // 需要被缓存}
}

2、在 B 组件里面设置 beforeRouteLeave:

export default {data() {return {};},methods: {},beforeRouteLeave(to, from, next) {// 设置下一个路由的 metato.meta.keepAlive = true;  // 让 A 缓存,即不刷新next();}
};

3、在 C 组件里面设置 beforeRouteLeave:

export default {data() {return {};},methods: {},beforeRouteLeave(to, from, next) {// 设置下一个路由的 metato.meta.keepAlive = false; // 让 A 不缓存,即刷新next();}
};

这样便能实现 B 回到 A,A 不刷新;而 C 回到 A 则刷新。

六、防坑指南:
  • keep-alive 先匹配被包含组件的 name 字段,如果 name 不可用,则匹配当前组件 components 配置中的注册名称。
  • keep-alive 不会在函数式组件中正常工作,因为它们没有缓存实例。
  • 当匹配条件同时在 include 与 exclude 存在时,以 exclude 优先级最高(当前vue 2.4.2 version)。比如:包含于排除同时匹配到了组件A,那组件A不会被缓存。
  • 包含在 keep-alive 中,但符合 exclude ,不会调用 activated 和 deactivated。

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

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

相关文章

expdp到ASM 文件系统 并拷贝

1.创建asm导出数据目录 sql>select name,total_mb,free_mb from v$asm_diskgroup; 确认集群asm磁盘组环境 asmcmd>cd DGDSDB asmcmd>mkdir dpbak asmcmd>ls -l sql>conn / as sysdba create directory expdp_asm_dir as DGDSDB/dpbak; create directory expdp_l…

『番外篇六』SwiftUI 取得任意视图全局位置的三种方法

概览 在 SwiftUI 开发中,利用描述性代码我们可以很轻松的构建各种丰富多彩的视图。我们可以设置它们的大小、位置、颜色并应用不计其数的修改器。 但是,小伙伴们是否想过在 SwiftUI 中如何获取一个视图的全局位置坐标呢? 在本篇博文中,您将学到如下内容: 概览1. SwiftU…

批处理学习笔记1_命令的语法与功能A

批处理除了可以用Windows自带的记事本编辑外&#xff0c;还可以在命令行中输入copy con 文件名来创建&#xff0c;比如&#xff1a;copy con a.bat&#xff0c;然后就可以在命令中编辑&#xff0c;等文件编辑完毕后&#xff0c;输入CTRLz&#xff0c;再敲回车&#xff0c;就可以…

守护 C 盘,Python 相关库设置

文章目录 前言Python 相关查看所有 Python 安装位置查看 Python 依赖位置查看 conda 配置查看 env 列表移除指定 env创建 env进入 env删除环境位置目录添加环境位置 (将位置置顶)查看 pip 缓存位置设置 pip 缓存位置 其他进入 Temp修改位置 Python技术资源分享1、Python所有方向…

(001)Unit 编译 UTF8JSON

文章目录 编译 Dll编译报错附录 编译 Dll 新建工程&#xff1a; 注意 UnityEngineDll 的选择&#xff01;2022 版本的太高了&#xff01;&#xff01;&#xff01; 下载包&#xff0c;导入unity : 3. 将 unf8json 的源码拷贝到新建的工程。 4. 编译发布版本&#xff1a; 编译…

竞赛保研 基于卷积神经网络的乳腺癌分类 深度学习 医学图像

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…

mongoose中http server服务器解决“Access-Control-Allow-Origin mongoose”跨域问题

问题 使用mongoose做http服务器&#xff0c;自己构造的浏览器端jquery在访问server时&#xff0c;会遇到&#xff1a; Access to XMLHttpRequest at http://127.0.0.1:8000/ from origin null has been blocked by CORS policy: No Access-Control-Allow-Origin header is pr…

python+django大自然环境保护宣传网站62r9b

本课题使用Python语言进行开发。基于web,代码层面的操作主要在PyCharm中进行&#xff0c;将系统所使用到的表以及数据存储到MySQL数据库中 本系统由后台管理子系统&#xff0c;登录子系统&#xff0c;按登陆角色及权限划分为管理员:个人中心&#xff0c;用户管理&#xff0c;文…

遇到DDOS怎么办,盾真的可以抗攻击吗

网络在以难以想象的速度发展&#xff0c;黑客们针对网络漏洞发起的攻击也从未停止&#xff0c;但复杂的网络环境让网络安全的维护更为艰难&#xff0c;如果游戏公司没有做好防御措施&#xff0c;黑客发起攻击只是时间问题。在网络攻击愈加多元化的今天&#xff0c;游戏行业可以…

懒加载的el-tree中没有了子节点之后还是有前面icon箭头的展示,如何取消没有子节点之后的箭头显示

没有特别多的数据 <template><el-tree:props"props":load"loadNode"lazyshow-checkbox></el-tree></template><script>export default {data() {return {props: {label: name,children: zones,isLeaf:"leaf",//关…

Python requests get和post方法发送HTTP请求

requests.get() requests.get() 方法用于发送 HTTP GET 请求。下面介绍 requests.get() 方法的常用参数&#xff1a; url: 发送请求的 URL 地址。params: URL 中的查询参数&#xff0c;可以是字典或字符串。headers: 请求头信息。可以是字典类型&#xff0c;也可以是自定义的…

交互式笔记Jupyter Notebook本地部署并实现公网远程访问内网服务器

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 1.前言2.Jupyter Notebook的安装2.1 Jupyter Notebook下…

故障诊断模型 | Maltab实现PSO-BP粒子群算法优化BP神经网络的故障诊断

文章目录 效果一览文章概述模型描述源码设计参考资料效果一览 文章概述 故障诊断模型 | Maltab实现PSO-BP粒子群算法优化BP神经网络的故障诊断 模型描述 在机器学习领域,我们常常需要通过训练数据来学习一个函数模型,以便在未知的数据上进行预测或分类。传统的神经网络模型需…

Java设计模式-外观模式

目录 一、影院管理项目 二、外观模式 &#xff08;一&#xff09;基本介绍 &#xff08;二&#xff09;原理类图 &#xff08;三&#xff09;解决影院管理 &#xff08;四&#xff09;注意事项和细节 &#xff08;五&#xff09;外观模式在MyBatis框架应用的源码分析 一…

Python+OpenGL绘制3D模型(七)制作3dsmax导出插件

系列文章 一、逆向工程 Sketchup 逆向工程&#xff08;一&#xff09;破解.skp文件数据结构 Sketchup 逆向工程&#xff08;二&#xff09;分析三维模型数据结构 Sketchup 逆向工程&#xff08;三&#xff09;软件逆向工程从何处入手 Sketchup 逆向工程&#xff08;四&#xf…

Linux操作系统( YUM软件仓库技术 )

镜像文件的回环挂载&#xff08;把iso镜像文件释放成系统安装光盘&#xff09;foundation0上操作 回环挂载的用法&#xff1a; du -sh 对象名 //估算文件&#xff08;一切对象皆文件&#xff09;大小 !$ //上一条命令的最后一个参数 新创建的挂载点目录是空白目录 挂载&#xf…

一款汇聚 精美UI+AI内容生成助手 的实用白板工具

大家好&#xff0c;我是Mandy。今天给大家分享的内容是&#xff0c;boardmix白板AI&#xff0c;在线创作神器。 boardmix是一款在线白板工具&#xff0c;是一个实时协作的智慧白板上、一键生成PPT、用AI协助创作思维导图、AI绘画、AI写作、共享资源素材、思维导图等工具。 前…

我的128天之创作纪念日

目录 序 机缘 收获 日常 成就 憧憬 序 今天收到CSDN的一条消息推送&#xff0c;“初九之潜龙勿用 &#xff0c;不知不觉今天已经是你成为创作者的 第128天 啦。。。” 是啊&#xff0c;自今年8月24日开始写文章以来&#xff0c;时间过得好快&#xff0c;无论开心、痛苦…

OpenStack云计算(-) 简介与部署Keystone

一.OpenStack简介 什么是云计算:云计算是一种按使用量付费的模式,这种模式提供可用的、便捷的、按需的网络访问,进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务) 云计算所包含的几个层次服务&#xff1a; SaaS ( Software as a Service ) :把在线软件作…

golang第三卷---常量指针

常量指针 常量指针类型别名注释 常量 Go语言中的常量使用关键字const定义&#xff0c;用于存储不会改变的数据&#xff0c;常量是在编译时被创建的&#xff0c;即使定义在函数内部也是如此&#xff0c;并且只能是布尔型、数字型&#xff08;整数型、浮点型和复数&#xff09;和…