Vue中keep-alive的两种应用方式


Posted in Javascript onJuly 15, 2020

Vue中keep-alive的使用我总结的有两种方式应用:

首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件。当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时又重新初始化。现在有需求切换回来不销毁组件,保持原来的状态,此时用keep-alive就可以实现了

我创建了两个组件,可以相互切换

组件1:

Vue中keep-alive的两种应用方式

Vue中keep-alive的两种应用方式

组件2:

Vue中keep-alive的两种应用方式

Vue中keep-alive的两种应用方式

第一种方式

在组件1的路由中添加 meta: { keepAlive: true }, 也就是当前路由需要缓存

Vue中keep-alive的两种应用方式

此时路由设置完毕,keep-alive代码可以结合v-if进行包裹,如果meta中的keepAlive为true进行缓存,否侧不进行缓存,这样可以更灵活一些。

Vue中keep-alive的两种应用方式

此时组件被缓存,不会销毁,所以切换不会重新创建,自然也不会调用create等生命周期函数。不过我们可以用activated与deactivated来获取当前组件是否处于活动状态(类似钩子函数的用法)。

第二种方式

在keep-alive上有两个属性:

Vue中keep-alive的两种应用方式

通过include设置

Vue中keep-alive的两种应用方式

此时,也可以达到缓存keepAlive组件的目的。

以上是我初步总结的keep-alive的实现用法,不正之处烦请诸位指正。

到此这篇关于Vue中keep-alive的两种应用方式的文章就介绍到这了,更多相关Vue keep-alive内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
js实现浏览器打印功能的示例代码
Jul 15 #Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 #Javascript
详解JavaScript 作用域
Jul 14 #Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 #Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
javaScript实现一个队列的方法
Jul 14 #Javascript
0基础学习前端开发的一些建议
Jul 14 #Javascript
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
JavaScript入门基础
2015/08/12 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
微信小程序页面传值实例分析
2017/04/19 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
py中的目录与文件判别代码
2008/07/16 Python
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
python获取本地计算机名字的方法
2015/04/29 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python随机数random模块使用指南
2016/09/09 Python
Python生成密码库功能示例
2017/05/23 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
如何将json数据转换为python数据
2020/09/04 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
小学校长先进事迹材料
2014/05/13 职场文书
员工工作表现自我评价
2015/03/06 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书