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

extjs 列表框(multiselect)的动态添加列表项的方法

Jul 31 Javascript

jquery ajax属性async(同步异步)示例

Nov 05 Javascript

详解JavaScript的while循环的使用

Jun 03 Javascript

JavaScript数据结构与算法之栈与队列

Jan 29 Javascript

JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

Mar 25 Javascript

jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍

Jun 24 Javascript

Bootstrap导航菜单点击后无法自动添加active的处理方法

Aug 10 Javascript

详解swiper在vue中的应用(以3.0为例）

Sep 20 Javascript

JQuery样式操作、click事件以及索引值-选项卡应用示例

May 14 jQuery

jQuery实现判断滚动条滚动到document底部的方法分析

Aug 27 jQuery

JavaScript实现背景自动切换小案例

Sep 27 Javascript

element form 校验数组每一项实例代码

Oct 10 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 DataGrid 实现代码

2009/08/12 PHP

兼容各大浏览器带关闭按钮的漂浮多组图片广告代码

2014/06/05 PHP

PHP使用栈解决约瑟夫环问题算法示例

2017/08/27 PHP

php 命名空间(namespace)原理与用法实例小结

2019/11/13 PHP

基于jQuery的弹出警告对话框美化插件(警告，确认和提示)

2010/06/10 Javascript

js实现商城星星评分的效果

2015/12/29 Javascript

node.js报错：Cannot find module 'ejs'的解决办法

2016/12/14 Javascript

Mint UI 基于 Vue.js 移动端组件库

2017/11/07 Javascript

JS匿名函数和匿名自执行函数概念与用法分析

2018/03/16 Javascript

解决vue 引入子组件报错的问题

2018/09/06 Javascript

在js代码拼接dom对象到页面上的模板总结

2018/10/21 Javascript

可能被忽略的一些JavaScript数组方法细节

2019/02/28 Javascript

JavaScript中工厂函数与构造函数示例详解

2019/05/06 Javascript

解决layer弹出层中表单不起作用的问题

2019/09/09 Javascript

Python中unittest用法实例

2014/09/25 Python

Python按行读取文件的实现方法【小文件和大文件读取】

2016/09/19 Python

Python进程间通信Queue实例解析

2018/01/25 Python

Python实现购物车购物小程序

2018/04/18 Python

pandas 转换成行列表进行读取与Nan处理的方法

2018/10/30 Python

将python文件打包成EXE应用程序的方法

2019/05/22 Python

python实现websocket的客户端压力测试

2019/06/25 Python

python——全排列数的生成方式

2020/02/26 Python

Python selenium爬虫实现定时任务过程解析

2020/06/08 Python

捷克厨房用品购物网站：Tescoma

2018/07/13 全球购物

印度购买眼镜和太阳镜网站：Coolwinks

2018/09/26 全球购物

橄榄树药房：OLIVEDA

2019/09/01 全球购物

如何进行Linux分区优化

2013/02/12 面试题

Java Servlet API中forward() 与redirect()的区别

2014/04/20 面试题

财务管理专业自荐信范文

2013/12/24 职场文书

《水上飞机》教学反思

2014/04/10 职场文书

2014年安全生产大检查方案

2014/05/13 职场文书

优秀会计求职信

2014/07/04 职场文书

2015会计试用期工作总结

2014/12/12 职场文书

英语专业毕业论文答辩开场白

2015/05/27 职场文书

详解JAVA中的OPTIONAL

2021/06/14 Java/Android

nginx刷新页面出现404解决方案(亲测有效)

2022/03/18 Servers