编程 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英文日期（有时间）选择器

May 02 Javascript

jQuery页面图片伴随滚动条逐渐显示的小例子

Mar 21 Javascript

EasyUi datagrid 实现表格分页

Feb 10 Javascript

jQuery Checkbox 全选反选的简单实例

Nov 29 Javascript

基于javascript实现最简单选项卡切换

Feb 01 Javascript

简单实现bootstrap导航效果

Feb 07 Javascript

inner join 内联与left join 左联的实例代码

Sep 18 Javascript

微信小程序scroll-x失效的完美解决方法

Jul 18 Javascript

vue elementUI 表单嵌套验证的实例代码

Nov 06 Javascript

如何优雅地取消 JavaScript 异步任务

Mar 22 Javascript

JavaScript接口实现方法实例分析

May 16 Javascript

vue Treeselect 树形下拉框:获取选中节点的ids和lables操作

Aug 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

学习discuz php 引入文件的方法DISCUZ_ROOT

2009/06/21 PHP

Apache下禁止php文件被直接访问的解决方案

2013/04/25 PHP

PHP面试常用算法(推荐)

2016/07/22 PHP

PHP在linux上执行外部命令的方法

2017/02/06 PHP

使用PHP+Redis实现延迟任务,实现自动取消订单功能

2019/11/21 PHP

JS读取cookies信息(记录用户名)

2012/01/10 Javascript

jquery子元素过滤选择器使用示例

2013/06/24 Javascript

js中widow.open()方法使用详解

2013/07/30 Javascript

js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例

2015/04/29 Javascript

JavaScript实现多种排序算法

2016/02/24 Javascript

Bootstrap源码解读表单（2）

2016/12/22 Javascript

详解webpack 多页面/入口支持&公共组件单独打包

2017/06/29 Javascript

angular2+node.js express打包部署的实战

2017/07/27 Javascript

详解angularjs 学习之 scope作用域

2018/01/15 Javascript

微信小程序实现九宫格抽奖

2020/04/15 Javascript

vue移动端写的拖拽功能示例代码

2020/09/09 Javascript

微信小程序入门之绘制时钟

2020/10/22 Javascript

在vue中使用inheritAttrs实现组件的扩展性介绍

2020/12/07 Vue.js

[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士

2020/07/16 DOTA

python对字典进行排序实例

2014/09/25 Python

零基础写python爬虫之urllib2使用指南

2014/11/05 Python

Python标准异常和异常处理详解

2015/02/02 Python

python使用itchat库实现微信机器人(好友聊天、群聊天)

2018/01/04 Python

TensorFlow实现iris数据集线性回归

2018/09/07 Python

Keras官方中文文档:性能评估Metrices详解

2020/06/15 Python

Python实现上下文管理器的方法

2020/08/07 Python

python爬虫scrapy图书分类实例讲解

2020/11/23 Python

Python环境配置实现pip加速过程解析

2020/11/27 Python

CSS3截取字符串实例代码【推荐】

2018/06/07 HTML / CSS

html5开发之viewport使用

2013/10/17 HTML / CSS

Omio法国：全欧洲低价大巴、火车和航班搜索和比价

2017/11/13 全球购物

马来西亚领先的在线礼品店：Giftr

2018/08/23 全球购物

Omio英国：搜索并比较便宜的巴士、火车和飞机

2019/08/27 全球购物

班级入场式解说词

2014/02/01 职场文书

小学生保护环境倡议书

2014/05/15 职场文书

生物技术专业求职信

2014/06/10 职场文书