编程 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浮点数精确计算(加、减、乘、除)

Dec 26 Javascript

JS交换变量的方法

Jan 21 Javascript

jquery append 动态添加的元素事件on 不起作用的解决方案

Jul 30 Javascript

谈谈我对JavaScript中typeof和instanceof的深入理解

Dec 25 Javascript

jQuery深拷贝Json对象简单示例

Jul 06 Javascript

BootStrap glyphicon图标无法显示的解决方法

Sep 06 Javascript

JS匿名函数实例分析

Nov 26 Javascript

jQuery实现滚动效果

Nov 17 jQuery

Vue一个案例引发的递归组件的使用详解

Nov 15 Javascript

微信小程序上线发布流程图文详解

May 06 Javascript

详解vue 动态加载并注册组件且通过 render动态创建该组件

May 30 Javascript

让 babel webpack vue 配置文件支持智能提示的方法

Jun 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加密解密的代码

2006/10/09 PHP

windows7下php开发环境搭建图文教程

2015/01/06 PHP

Yii数据库缓存实例分析

2016/03/29 PHP

PHP会话操作之cookie用法分析

2016/09/28 PHP

JS动画效果代码3

2008/04/03 Javascript

JS验证控制输入中英文字节长度(input、textarea等)具体实例

2013/06/21 Javascript

方便实用的jQuery checkbox复选框全选功能简单实例

2013/10/09 Javascript

动态显示可输入的字数提示还可以输入的字数

2014/04/01 Javascript

zeroclipboard 单个复制按钮和多个复制按钮的实现方法

2014/06/14 Javascript

jquery图片播放浏览插件prettyPhoto使用详解

2014/12/19 Javascript

jQuery中prependTo()方法用法实例

2015/01/08 Javascript

js+cookies实现悬浮购物车的方法

2015/05/25 Javascript

jQuery zTree加载树形菜单功能

2016/02/25 Javascript

JavaScript简单获取系统当前时间完整示例

2016/08/02 Javascript

深入分析node.js的异步API和其局限性

2016/09/05 Javascript

JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

2017/06/30 Javascript

详解使用vue实现tab 切换操作

2017/07/03 Javascript

使用nodejs+express实现简单的文件上传功能

2017/12/27 NodeJs

js实现三角形粒子运动

2020/09/22 Javascript

[01:10]DOTA2 Supermajor：英雄，由我们见证

2018/05/14 DOTA

python选择排序算法的实现代码

2013/11/21 Python

详解如何在cmd命令窗口中搭建简单的python开发环境

2019/08/29 Python

基于python3抓取pinpoint应用信息入库

2020/01/08 Python

python 控制台单行刷新,多行刷新实例

2020/02/19 Python

python反扒机制的5种解决方法

2021/02/06 Python

CSS3 mask 遮罩的具体使用方法

2017/11/03 HTML / CSS

亚马逊西班牙购物网站：amazon西班牙

2017/03/06 全球购物

Why do we need Unit test

2013/01/03 面试题

小松树教学反思

2014/02/11 职场文书

关于环保的建议书400字

2014/03/12 职场文书

广告创意求职信

2014/03/17 职场文书

2014年国庆标语

2014/06/30 职场文书

社区两委对照检查材料

2014/08/23 职场文书

课外活动实习计划

2015/01/19 职场文书

关于法制教育的宣传语

2015/07/13 职场文书

大脑的记忆过程在做数据压缩，不同图形也有共同的记忆格式

2022/04/29 数码科技