编程 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 个人笔记（没有整理，很乱）

Jul 07 Javascript

JavaScript弹簧振子超简洁版完全符合能量守恒,胡克定理

Oct 25 Javascript

获取非最后一列td值并将title设为该值的方法

Oct 30 Javascript

微信中一些常用的js方法汇总

Mar 12 Javascript

javascript检查某个元素在数组中的索引值

Mar 30 Javascript

JS组件Bootstrap Select2使用方法解析

May 30 Javascript

EasyUI中的dataGrid的行内编辑

Jun 22 Javascript

Parcel 打包示例(React HelloWorld)

Jan 16 Javascript

vue2.0 下拉框默认标题设置方法

Aug 22 Javascript

Vue中this.$nextTick的作用及用法

Feb 04 Javascript

浅谈vue 组件中的setInterval方法和window的不同

Jul 30 Javascript

vue2实现provide inject传递响应式

May 21 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

在数据量大（超过10万）的情况下

2007/01/15 PHP

PHP连接SQLServer2005方法及代码

2013/12/26 PHP

PHP实现的json类实例

2015/07/28 PHP

php给图片添加文字水印方法汇总

2015/08/27 PHP

PHP微信开发之文本自动回复

2016/06/23 PHP

laravel中Redis队列监听中断的分析

2020/09/14 PHP

js option删除代码集合

2008/11/12 Javascript

JS在TextArea光标位置插入文字并实现移动光标到文字末尾

2013/06/21 Javascript

ajax提交表单实现网页无刷新注册示例

2014/05/08 Javascript

js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)

2015/11/09 Javascript

超漂亮的jQuery图片轮播特效

2015/11/24 Javascript

探讨JavaScript标签位置的存放与功能有无关系

2016/01/15 Javascript

Bootstrap中data-target 到底是什么

2017/02/14 Javascript

Node.js模块全局安装路径配置方法

2018/05/17 Javascript

微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例

2018/12/20 Javascript

JavaScript cookie原理及使用实例

2020/05/08 Javascript

Python实现的网页截图功能【PyQt4与selenium组件】

2018/07/12 Python

python PrettyTable模块的安装与简单应用

2019/01/11 Python

python 在指定范围内随机生成不重复的n个数实例

2019/01/28 Python

Django框架之DRF 基于mixins来封装的视图详解

2019/07/23 Python

Pytorch 数据加载与数据预处理方式

2019/12/31 Python

浅析python中的del用法

2020/09/02 Python

Matplotlib配色之Colormap详解

2021/01/05 Python

CSS3实现图片抽屉式效果的示例代码

2019/11/06 HTML / CSS

canvas版人体时钟的实现示例

2021/01/29 HTML / CSS

团支书的期末学习总结自我评价

2013/11/01 职场文书

新浪微博实习心得体会

2014/01/27 职场文书

餐厅总厨求职信

2014/03/04 职场文书

高中军训感言800字

2014/03/05 职场文书

士力架广告词

2014/03/20 职场文书

奉献爱心演讲稿

2014/09/04 职场文书

2015年实习单位评语

2015/03/25 职场文书

运动会报道稿大全

2015/07/23 职场文书

浅谈node.js中间件有哪些类型

2021/04/29 Javascript

mysql 带多个条件的查询方式

2021/06/05 MySQL

vue里使用create, mounted调用方法

2022/04/26 Vue.js