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

避免回车键导致的页面无意义刷新的解决方法

Apr 12 Javascript

使用正则表达式的格式化与高亮显示json字符串

Dec 03 Javascript

JavaScript中字符串(string)转json的2种方法

Jun 25 Javascript

Vue.js 表单校验插件

Aug 14 Javascript

JavaScript每天必学之事件

Sep 18 Javascript

微信小程序数组中的push与concat的区别

Jan 05 Javascript

ES6中的箭头函数实例详解

Apr 06 Javascript

详解使用angularjs的ng-options时如何设置默认值(初始值)

Jul 18 Javascript

layui 弹出删除确认界面的实例

Sep 06 Javascript

JavaScript实现简单随机点名器

Nov 21 Javascript

vuex实现购物车的增加减少移除

Jun 28 Javascript

原生js实现弹幕效果

Nov 29 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的数组与字符串的转换函数整理汇总

2013/07/18 PHP

php中jpgraph类库的使用介绍

2013/08/08 PHP

php获取从html表单传递数组的方法

2015/03/20 PHP

简单谈谈php延迟静态绑定

2016/01/26 PHP

PHP CURL采集百度搜寻结果图片不显示问题的解决方法

2017/02/03 PHP

PHP守护进程化在C和PHP环境下的实现

2017/11/21 PHP

关于Jqzoom的使用心得 jquery放大镜效果插件

2010/04/12 Javascript

onclick与listeners的执行先后问题详细解剖

2013/01/07 Javascript

javascript写的异步加载js文件函数(支持数组传参)

2014/06/07 Javascript

jQuery中even选择器的定义和用法

2014/12/23 Javascript

原生js实现autocomplete插件

2016/04/14 Javascript

3kb jQuery代码搞定各种树形选择的实现方法

2016/06/10 Javascript

jquery 中toggle的2种用法详解(推荐)

2016/09/02 Javascript

微信小程序本作用域下调用全局JS详解及实例

2017/02/22 Javascript

Javascript 链式作用域详细介绍

2017/02/23 Javascript

JavaScript数组和对象的复制

2017/03/21 Javascript

解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题

2017/11/28 Javascript

Vue实现根据hash高亮选项卡

2019/05/27 Javascript

[01:15:36]加油刀塔第二期网络版

2014/08/09 DOTA

python实现颜色空间转换程序(Tkinter)

2015/12/31 Python

Python的网络编程库Gevent的安装及使用技巧

2016/06/24 Python

Linux CentOS Python开发环境搭建教程

2018/11/28 Python

Python面向对象之继承和多态用法分析

2019/06/08 Python

pandas 使用均值填充缺失值列的小技巧分享

2019/07/04 Python

python性能测量工具cProfile使用解析

2019/09/26 Python

python打印n位数“水仙花数”(实例代码)

2019/12/25 Python

python实现低通滤波器代码

2020/02/26 Python

python logging模块的使用

2020/09/07 Python

Html5+JS实现手机摇一摇功能

2015/04/24 HTML / CSS

移动通信行业实习自我鉴定

2013/09/28 职场文书

艺术应用与设计专业个人的自我评价

2013/11/19 职场文书

校长先进事迹材料

2014/02/01 职场文书

员工工作表现评语

2014/04/26 职场文书

中学生纪念九一八事变演讲稿

2014/09/14 职场文书

2015年五一劳动节演讲稿

2015/03/18 职场文书

Win10 heic文件怎么打开 ? Win10 heic文件打开教程

2022/04/06 数码科技