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 相关文章推荐
Prototype的Class.create函数解析
Sep 22 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
13个PHP函数超实用
Oct 21 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
详解js中==与===的区别
Jan 08 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 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
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
理解Python中的类与实例
2015/04/27 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python匿名函数及应用示例
2019/04/09 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
python hashlib加密实现代码
2019/10/17 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
一些PHP的面试题
2015/05/06 面试题
秸秆管理实施方案
2014/03/15 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
班级标语大全
2014/06/21 职场文书
主要领导对照检查材料
2014/08/26 职场文书
客户答谢会致辞
2015/01/20 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
MySQL快速插入一亿测试数据
2021/06/23 MySQL
SpringBoot快速入门详解
2021/07/21 Java/Android