编程 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中使用正则匹配多条，且获取每条中的分组数据

Nov 30 Javascript

Jquery判断IE6等浏览器的代码

Apr 05 Javascript

javascript 主动派发事件总结

Aug 09 Javascript

如何将一个String和多个String值进行比较思路分析

Apr 22 Javascript

关于JavaScript命名空间的一些心得

Jun 07 Javascript

JS判断图片是否加载完成方法汇总(最新版)

May 13 Javascript

浅谈html转义及防止javascript注入攻击的方法

Dec 04 Javascript

一篇看懂vuejs的状态管理神器 vuex状态管理模式

Apr 20 Javascript

Vue2.0 axios前后端登陆拦截器(实例讲解)

Oct 27 Javascript

讲解vue-router之什么是嵌套路由

May 28 Javascript

基于JavaScript伪随机正态分布代码实例

Nov 07 Javascript

Vue实现简单购物车功能

Dec 13 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

对盗链说再见...

2006/10/09 PHP

php5中date()得出的时间为什么不是当前时间的解决方法

2008/06/30 PHP

ajax+php打造进度条代码[readyState各状态说明]

2010/04/12 PHP

javascript动画效果类封装代码

2007/08/28 Javascript

$.each与$().each的区别示例介绍

2014/03/20 Javascript

canvas 弹幕效果（实例分享）

2017/01/11 Javascript

Bootstrap table表格简单操作

2017/02/07 Javascript

BackBone及其实例探究_动力节点Java学院整理

2017/07/14 Javascript

薪资那么高的Web前端必看书单

2017/10/13 Javascript

JS中用EL表达式获取上下文参数值的方法

2018/03/28 Javascript

ES6之模版字符串的具体使用

2018/05/17 Javascript

Vuejs+vue-router打包+Nginx配置的实例

2018/09/20 Javascript

Vue中使用方法、计算属性或观察者的方法实例详解

2018/10/31 Javascript

利用Dectorator分模块存储Vuex状态的实现

2019/02/05 Javascript

Vue中Table组件Select的勾选和取消勾选事件详解

2019/03/19 Javascript

vue cli 3.x 项目部署到 github pages的方法

2019/04/17 Javascript

在微信小程序中使用vant的方法

2019/06/07 Javascript

vue+layui实现select动态加载后台数据的例子

2019/09/20 Javascript

js基于canvas实现时钟组件

2021/02/07 Javascript

[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE

2014/05/22 DOTA

Python中操作MySQL入门实例

2015/02/08 Python

Python信息抽取之乱码解决办法

2017/06/29 Python

使用Python从零开始撸一个区块链

2018/03/14 Python

Centos7 Python3下安装scrapy的详细步骤

2018/03/15 Python

python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作

2019/12/11 Python

Python动态导入模块和反射机制详解

2020/02/18 Python

CSS3制作3D立方体loading特效

2020/11/09 HTML / CSS

Top Villas美国：豪华别墅出租和度假屋

2018/07/10 全球购物

Weblogic的布署方式

2013/08/23 面试题

＂火柴棍式＂程序员面试题

2014/03/16 面试题

基于Python 函数和方法的区别说明

2021/03/24 Python

婚纱摄影师求职信

2014/03/07 职场文书

幼儿教师师德演讲稿

2014/05/06 职场文书

优秀学生干部个人事迹材料

2014/06/02 职场文书

2014年六五普法工作总结

2014/11/25 职场文书

Python连续赋值需要注意的一些问题

2021/06/03 Python