编程 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 相关文章推荐

一个可以显示阴历的JS代码

Mar 05 Javascript

JQuery 获得绝对,相对位置的坐标方法

Feb 09 Javascript

JS拖动技术关于setCapture使用

Dec 09 Javascript

jQuery图片播放8款精美插件分享

Feb 17 Javascript

js图片模糊切换显示特效的方法

Feb 17 Javascript

深入理解JavaScript的React框架的原理

Jul 02 Javascript

非常棒的jQuery图片轮播效果

Apr 17 Javascript

JS简单生成两个数字之间随机数的方法

Aug 03 Javascript

Angular ng-class详解及实例代码

Sep 19 Javascript

JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例

Jul 23 Javascript

vue组件开发之用户无限添加自定义填写表单的方法

Aug 28 Javascript

详解vue-cli3 中跨域解决方案

Apr 10 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中文字符截取防乱码

2008/03/28 PHP

PHP 杂谈《重构-改善既有代码的设计》之四简化条件表达式

2012/04/09 PHP

php防止sql注入代码实例

2013/12/18 PHP

Laravel 5.3 学习笔记之安装

2016/08/28 PHP

一个简单的php MVC留言本实例代码(必看篇)

2016/09/22 PHP

ThinkPHP打水印及设置水印位置的方法

2016/10/14 PHP

PHP7多线程搭建教程

2017/04/21 PHP

Jquery CheckBox全选方法代码附js checkbox全选反选代码

2010/06/09 Javascript

jquery对象和DOM对象的区别介绍

2013/08/09 Javascript

js获取url参数值的两种方式

2013/09/10 Javascript

JS OffsetParent属性深入解析

2014/01/13 Javascript

JSONP获取Twitter和Facebook文章数的具体步骤

2014/02/24 Javascript

浅析Javascript中bind()方法的使用与实现

2016/04/29 Javascript

jstree创建无限分级树的方法【基于ajax动态创建子节点】

2016/10/25 Javascript

jQuery点击头像上传并预览图片

2017/02/23 Javascript

Js实现中国公民身份证号码有效性验证实例代码

2017/05/03 Javascript

NodeJs生成sitemap站点地图的方法示例

2019/06/11 NodeJs

微信小程序登录对接Django后端实现JWT方式验证登录详解

2019/07/29 Javascript

python导出hive数据表的schema实例代码

2018/01/22 Python

读取json格式为DataFrame(可转为.csv)的实例讲解

2018/06/05 Python

详解Python3中setuptools、Pip安装教程

2019/06/18 Python

python爬虫 urllib模块url编码处理详解

2019/08/20 Python

python实现简单日志记录库glog的使用

2019/12/13 Python

Python 使用threading+Queue实现线程池示例

2019/12/21 Python

Pytorch上下采样函数--interpolate用法

2020/07/07 Python

Python接口自动化系列之unittest结合ddt的使用教程详解

2021/02/23 Python

C#实现对任一张表的数据进行增，删，改，查要求，运用Webservice，体现出三层架构

2014/07/11 面试题

预备党员思想汇报

2014/01/08 职场文书

多媒体专业自我鉴定

2014/02/28 职场文书

演讲稿的格式及范文

2014/08/22 职场文书

小学生感恩老师演讲稿

2014/08/28 职场文书

2014年信息中心工作总结

2014/12/17 职场文书

2015毕业生自我评价范文

2015/03/02 职场文书

三国演义读书笔记

2015/06/25 职场文书

勤俭节约主题班会

2015/08/13 职场文书

python实现简单倒计时功能

2021/04/21 Python