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

jQuery中after的两种用法实例

Jul 03 Javascript

Javascript的闭包详解

Dec 26 Javascript

JQuery中使文本框获得焦点的方法实例分析

Feb 28 Javascript

JS异步加载的三种实现方式

Mar 16 Javascript

JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查

Apr 28 Javascript

xmlplus组件设计系列之选项卡（Tabbar)（5）

May 03 Javascript

获取url中用&隔开的参数实例(分享)

May 28 Javascript

jQuery实现可兼容IE6的滚动监听功能

Sep 20 jQuery

easyui下拉框动态级联加载的示例代码

Nov 29 Javascript

解决低版本的浏览器不支持es6的import问题

Mar 09 Javascript

JS求1到任意数之间的所有质数的方法详解

May 20 Javascript

create-react-app中添加less支持的实现

Nov 15 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实现HTML实体编号与非ASCII字符串相互转换类实例

2016/11/02 PHP

php利用gd库为图片添加水印

2016/11/09 PHP

PHP实现创建微信自定义菜单的方法示例

2017/07/14 PHP

PJBlog插件防刷新的在线播放器

2006/10/25 Javascript

js精度溢出解决方案

2012/12/02 Javascript

js动态添加事件并可传参数示例代码

2013/10/21 Javascript

jQuery获取某天的农历日期并判断是否除夕或新年的方法

2016/03/01 Javascript

NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

2016/07/26 NodeJs

Vue表单实例代码

2016/09/05 Javascript

jQuery实现获取元素索引值index的方法

2016/09/18 Javascript

JS实现的适合做faq或menu滑动效果示例

2016/11/17 Javascript

BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

2016/12/01 Javascript

bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法

2017/01/05 Javascript

Vue.js实现表格动态增加删除的方法（附源码下载）

2017/01/20 Javascript

深入浅析Vue.js中 computed和methods不同机制

2018/03/22 Javascript

vue-content-loader内容加载器的使用方法

2018/08/05 Javascript

VUE注册全局组件和局部组件过程解析

2019/10/10 Javascript

[02:44]DOTA2英雄基础教程魅惑魔女

2014/01/07 DOTA

Python实现的ini文件操作类分享

2014/11/20 Python

Python通过PIL获取图片主要颜色并和颜色库进行对比的方法

2015/03/19 Python

Python脚本在Appium库上对移动应用实现自动化测试

2015/04/17 Python

Python使用pickle模块实现序列化功能示例

2018/07/13 Python

python实现图片筛选程序

2018/10/24 Python

python批量将excel内容进行翻译写入功能

2019/10/10 Python

利用Python的sympy包求解一元三次方程示例

2019/11/22 Python

Python进程间通信multiprocess代码实例

2020/03/18 Python

Python面向对象魔法方法和单例模块代码实例

2020/03/25 Python

彻底搞懂python 迭代器和生成器

2020/09/07 Python

python如何实现DES加密

2020/09/21 Python

python利用tkinter实现图片格式转换的示例

2020/09/28 Python

Nike俄罗斯官方网站：Nike RU

2021/03/05 全球购物

学生会主席就职演讲稿

2014/01/14 职场文书

二年级数学教学反思

2014/01/21 职场文书

三项教育活动实施方案

2014/03/30 职场文书

表扬稿表扬信的格式及范文

2019/06/24 职场文书

Python合并pdf文件的工具

2021/07/01 Python