编程 Javascript

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

Posted in Javascript onJuly 15, 2020

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

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

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

组件1：

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

组件2：

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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

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

- Author -

小羽羽

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 实用小技巧

Apr 07 Javascript

jqGrid日期格式的判断示例代码(开始日期与结束日期)

Nov 08 Javascript

JS实现简单的键盘打字的效果

Apr 24 Javascript

js获取当前日期时间及其它日期操作汇总

Mar 08 Javascript

有关文件上传非ajax提交得到后台数据问题

Oct 12 Javascript

关于angularJs清除浏览器缓存的方法

Nov 28 Javascript

利用vue组件自定义v-model实现一个Tab组件方法示例

Dec 06 Javascript

angular实现页面打印局部功能的思考与方法

Apr 13 Javascript

详解使用 Node.js 开发简单的脚手架工具

Jun 08 Javascript

优化Vue项目编译文件大小的方法步骤

May 27 Javascript

js getBoundingClientRect使用方法详解

Jul 17 Javascript

vue 导航守卫和axios拦截器有哪些区别

Dec 19 Vue.js

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面向对象全攻略（三）特殊的引用“$this”的使用

2009/09/30 PHP

php通过修改header强制图片下载的方法

2015/03/24 PHP

php实现批量删除挂马文件及批量替换页面内容完整实例

2016/07/08 PHP

php基于ob_start(ob_gzhandler)实现网页压缩功能的方法

2017/02/18 PHP

[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法

2017/04/01 PHP

prototype与jquery下Ajax实现的差别

2009/09/13 Javascript

15个款优秀的 jQuery 图片特效插件推荐

2011/11/21 Javascript

IE中JS跳转丢失referrer问题的2个解决方法

2014/07/18 Javascript

javascript实现随时变化着的背景颜色

2015/04/02 Javascript

怎么引入(调用)一个JS文件

2016/05/26 Javascript

JS简单实现仿百度控制台输出信息效果

2016/09/04 Javascript

JavaScript鼠标特效大全

2016/09/13 Javascript

详解layui弹窗父子窗口之间传参数的方法

2018/01/16 Javascript

基于vue+axios+lrz.js微信端图片压缩上传方法

2019/06/25 Javascript

JS实现图片切换特效

2019/12/23 Javascript

[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15

2019/08/16 DOTA

python用Pygal如何生成漂亮的SVG图像详解

2017/02/10 Python

python类的继承实例详解

2017/03/30 Python

python 中random模块的常用方法总结

2017/07/08 Python

OpenCV+Python识别车牌和字符分割的实现

2019/01/31 Python

Python3.5集合及其常见运算实例详解

2019/05/01 Python

python 提取文件指定列的方法示例

2019/08/07 Python

Pandas数据离散化原理及实例解析

2019/11/16 Python

在 Linux/Mac 下为Python函数添加超时时间的方法

2020/02/20 Python

scrapy与selenium结合爬取数据(爬取动态网站)的示例代码

2020/09/28 Python

python实现扫雷游戏的示例

2020/10/20 Python

详解HTML5通讯录获取指定多个人的信息

2016/12/20 HTML / CSS

巴西家用小家电购物网站：Polishop

2016/08/07 全球购物

英国领先的亚洲旅游专家：Wendy Wu Tours

2018/01/21 全球购物

美国打印机墨水和碳粉购物网站：QuikShip Toner

2018/08/29 全球购物

The Body Shop美体小铺西班牙官网：天然化妆品

2019/06/21 全球购物

DOUGLAS波兰：在线销售香水和化妆品

2020/07/05 全球购物

党支部对转正的意见

2015/06/02 职场文书

2016年大学光棍节活动总结

2016/04/05 职场文书

创业计划书之暑假培训班

2019/11/09 职场文书

「月刊Action」2022年5月号封面公开

2022/03/21 日漫