编程 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调试说明

Jun 07 Javascript

js constructor的实际作用分析

Nov 15 Javascript

js URL参数的拼接方法比较

Feb 15 Javascript

jQuery使用ajaxSubmit()提交表单示例

Apr 04 Javascript

JavaScript中的依赖注入详解

Mar 18 Javascript

JavaScript的Vue.js库入门学习教程

May 23 Javascript

详解Javascript几种跨域方式总结

Feb 27 Javascript

基于AngularJS的简单使用详解

Sep 10 Javascript

react router 4.0以上的路由应用详解

Sep 21 Javascript

帝国cms首页列表页实现点赞功能

Oct 30 Javascript

基于mpvue的简单弹窗组件mptoast使用详解

Aug 02 Javascript

JavaScript实现滑块验证解锁

Jan 07 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脚本来实现WordPress中评论分页的功能

2015/12/10 PHP

javascript的键盘控制事件说明

2008/04/15 Javascript

基于jquery的一个浮动框(扩展性比较好 )

2010/08/27 Javascript

jQuery怎么解析Json字符串(Json格式/Json对象)

2013/08/09 Javascript

封装了一个支持匿名函数的Javascript事件监听器

2014/06/05 Javascript

javascript 实现map集合

2015/04/03 Javascript

Underscore.js 1.3.3 中文注释翻译说明

2015/06/25 Javascript

JavaScript中setTimeout和setInterval函数的传参及调用

2016/03/11 Javascript

原生的强大DOM选择器querySelector介绍

2016/12/21 Javascript

vue2.0使用Sortable.js实现的拖拽功能示例

2017/02/21 Javascript

详解Webpack+Babel+React开发环境的搭建的方法步骤

2018/01/09 Javascript

深入浅出理解JavaScript闭包的功能与用法

2018/08/01 Javascript

Vue在 Nuxt.js 中重定向 404 页面的方法

2019/04/23 Javascript

[05:13]TI4 中国战队机场出征！！

2014/07/07 DOTA

[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾

2015/12/26 DOTA

[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场

2018/04/04 DOTA

Python实现的最近最少使用算法

2015/07/10 Python

Python多线程爬虫简单示例

2016/03/04 Python

基于Django的ModelForm组件(详解)

2017/12/07 Python

Python+matplotlib绘制不同大小和颜色散点图实例

2018/01/19 Python

python tools实现视频的每一帧提取并保存

2020/03/20 Python

解决Python列表字符不区分大小写的问题

2019/12/19 Python

Pytorch: 自定义网络层实例

2020/01/07 Python

Keras:Unet网络实现多类语义分割方式

2020/06/11 Python

Python中猜拳游戏与猜筛子游戏的实现方法

2020/09/04 Python

用60行代码实现Python自动抢微信红包

2021/02/04 Python

英国折扣高尔夫商店：Discount Golf Store

2019/11/19 全球购物

罗技英国官方网站：Logitech UK

2020/11/03 全球购物

开放系统互连参考模型

2016/06/29 面试题

20岁生日感言

2014/01/13 职场文书

标准自荐信范文

2014/01/29 职场文书

党的群众路线教育实践活动教师自我剖析材料

2014/10/09 职场文书

婚庆公司开业主持词

2015/06/30 职场文书

感恩教育主题班会

2015/08/12 职场文书

Python超简单容易上手的画图工具库推荐

2021/05/10 Python

基于PyQT5制作一个桌面摸鱼工具

2022/02/15 Python