编程 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实现计算两个日期的间隔天数

Aug 14 Javascript

jQuery 获取对象基本选择与层级

May 31 Javascript

json的前台操作和后台操作实现代码

Jan 20 Javascript

jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法

Mar 05 Javascript

AngularJS中的过滤器使用详解

Jun 16 Javascript

JavaScript实现横向滑出的多级菜单效果

Oct 09 Javascript

H5用户注册表单页注册模态框!

Sep 17 Javascript

JS刷新父窗口的几种方式小结(推荐)

Nov 09 Javascript

使用BootStrap建立响应式网页——通栏轮播图（carousel）

Dec 21 Javascript

vue几个常用跨域处理方式介绍

Feb 07 Javascript

vue+koa2实现session、token登陆状态验证的示例

Aug 30 Javascript

微信小程序实现多张图片上传功能

Nov 18 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

DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家

2020/04/09 欧美动漫

如何在smarty中增加类似foreach的功能自动加载数据

2013/06/26 PHP

php实现计算百度地图坐标之间距离的方法

2016/05/05 PHP

PHP封装的数据库模型Model类完整示例【基于PDO】

2019/03/14 PHP

PHP中md5()函数的用法讲解

2019/03/30 PHP

jquery $.ajax入门应用二

2008/11/19 Javascript

jquery 将disabled的元素置为enabled的三种方法

2009/07/25 Javascript

jquery禁用右键单击功能屏蔽F5刷新

2014/03/17 Javascript

JavaScript入门基础

2015/08/12 Javascript

js实现简单的联动菜单效果

2015/08/19 Javascript

微信小程序（应用号）开发新闻客户端实例

2016/10/24 Javascript

nodejs模块nodemailer基本使用-邮件发送示例(支持附件)

2017/03/28 NodeJs

微信小程序页面传值实例分析

2017/04/19 Javascript

微信小程序开发图片拖拽实例详解

2017/05/05 Javascript

vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

2017/08/04 Javascript

vue组件之Alert的实现代码

2017/10/17 Javascript

angularJs中跳转到指定的锚点实例($anchorScroll)

2018/08/31 Javascript

基于JavaScript实现单例模式

2019/10/30 Javascript

Vue-cli3生成的Vue项目加载Mxgraph方法示例

2020/05/31 Javascript

vue实现广告栏上下滚动效果

2020/11/26 Vue.js

[01:50]2014DOTA2西雅图邀请赛专访欢乐周宝龙

2014/07/08 DOTA

py中的目录与文件判别代码

2008/07/16 Python

使用Python编写简单网络爬虫抓取视频下载资源

2014/11/04 Python

python获取本地计算机名字的方法

2015/04/29 Python

Python实现SVN的目录周期性备份实例

2015/07/17 Python

Python随机数random模块使用指南

2016/09/09 Python

Python生成密码库功能示例

2017/05/23 Python

使用python实现unix2dos和dos2unix命令的例子

2019/08/13 Python

python调用函数、类和文件操作简单实例总结

2019/11/29 Python

python使用docx模块读写docx文件的方法与docx模块常用方法详解

2020/02/17 Python

如何将json数据转换为python数据

2020/09/04 Python

时尚的CSS3进度条效果

2012/02/22 HTML / CSS

小学校长先进事迹材料

2014/05/13 职场文书

员工工作表现自我评价

2015/03/06 职场文书

朝花夕拾读书笔记

2015/06/29 职场文书

助学金申请书该怎么写？

2019/07/16 职场文书