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

IE6下focus与blur错乱的解决方案

Jul 31 Javascript

js 获取后台的字段改变 checkbox的被选中的状态代码

Jun 05 Javascript

jquery mobile页面跳转后样式丢失js失效的解决方法

Sep 06 Javascript

JQuery右键菜单插件ContextMenu使用指南

Dec 19 Javascript

浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别

Aug 18 Javascript

JS基于面向对象实现的拖拽功能示例

Dec 20 Javascript

mui 打开新窗口的方式总结及注意事项

Aug 20 Javascript

JavaScript模块模式实例详解

Oct 25 Javascript

JS对象与json字符串相互转换实现方法示例

Jun 14 Javascript

JS实现面向对象继承的5种方式分析

Jul 21 Javascript

vue.js图片转Base64上传图片并预览的实现方法

Aug 02 Javascript

vue等两个接口都返回结果再执行下一步的实例

Sep 08 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 开发环境配置（测试开发环境）

2010/04/28 PHP

解析PHP工厂模式的好处

2013/06/18 PHP

php操作XML、读取数据和写入数据的实现代码

2014/08/15 PHP

DHTML 中的绝对定位

2006/11/26 Javascript

jquery.qrcode在线生成二维码使用示例

2013/08/21 Javascript

javascript阻止浏览器后退事件防止误操作清空表单

2013/11/22 Javascript

给事件响应函数传参数的四种方式小结

2013/12/05 Javascript

js模拟hashtable的简单实例

2014/03/06 Javascript

CSS中position属性之fixed实现div居中

2015/12/14 Javascript

js简单设置与使用cookie的方法

2016/01/22 Javascript

JavaScript实现斗地主游戏的思路

2016/02/29 Javascript

JavaScript程序中实现继承特性的方式总结

2016/06/24 Javascript

深入浅析Vue组件开发

2016/11/25 Javascript

node+express+ejs使用模版引擎做的一个示例demo

2017/09/18 Javascript

对vue中methods互相调用的方法详解

2018/08/30 Javascript

[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7

2014/06/25 DOTA

python的urllib模块显示下载进度示例

2014/01/17 Python

python调用百度语音识别实现大音频文件语音识别功能

2018/08/30 Python

python PIL和CV对图片的读取,显示,裁剪,保存实现方法

2019/08/07 Python

python实现梯度法 python最速下降法

2020/03/24 Python

Anaconda＋vscode＋pytorch环境搭建过程详解

2020/05/25 Python

Python新手学习函数默认参数设置

2020/06/03 Python

PyTorch: Softmax多分类实战操作

2020/07/07 Python

电气工程及其自动化自我评价四篇

2013/09/24 职场文书

写自荐信有哪些不宜？

2013/10/17 职场文书

八年级物理教学反思

2014/01/19 职场文书

酒后驾驶检讨书

2014/01/27 职场文书

诚信承诺书范文

2014/03/27 职场文书

食品工程专业求职信

2014/06/15 职场文书

领导班子党的群众路线对照检查材料

2014/09/25 职场文书

硕士毕业论文导师评语

2014/12/31 职场文书

婚礼答谢礼品

2015/01/20 职场文书

python数据库批量插入数据的实现(executemany的使用)

2021/04/30 Python

Spring Cache和EhCache实现缓存管理方式

2021/06/15 Java/Android

SpringBoot2零基础到精通之异常处理与web原生组件注入

2022/03/22 Java/Android

MySQL 字符集 character

2022/05/04 MySQL