示例vue 的keep-alive缓存功能的实现


Posted in Javascript onDecember 13, 2018

本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

示例vue 的keep-alive缓存功能的实现

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

prop:

  • include: 字符串或正则表达式。只有匹配的组件会被缓存。
  • exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

Vue 实现组件信息的缓存

当我们在开发vue的项目过程中,避免不了在路由切换到其他的component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载。

一、在app.vue里

<keep-alive>
 <router-view></router-view>
</keep-alive>

但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果。

那么我们给部分组件加上,实现方法如下:

在app.vue

<!--这里是需要keepalive的-->
<keep-alive>
 <router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive>
 
<!-- 这里不会被keepAlive -->
 
<router-view v-if="!$route.meta.keepAlive"></router-view>

二、 在路由的index.js页面里

{
 path: '',
 name: '',
 component: '',
 meta: {keepAlive: true}  // 这个是需要keepalive的
},
{
 path: '',
 name: '',
 component: ,
 meta: {keepAlive: false} // 这是不会被keepalive的
}

这就实现了部分组件的缓存功能

如果缓存的组件想要清空数据或者执行初始化方法,在加载组件的时候调用activated钩子函数,如下:

activated: function () {
 this.data = ‘'
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
JavaScript函数详解
Nov 17 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 #Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 #Javascript
新版小程序登录授权的方法
Dec 12 #Javascript
加快Vue项目的开发速度的方法
Dec 12 #Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 #Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 #Javascript
d3绘制基本的柱形图的实现代码
Dec 12 #Javascript
You might like
关于php mvc开发模式的感想
2011/06/28 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
php 数据结构之链表队列
2017/10/17 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
javascript数组的使用
2013/03/28 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
python语言元素知识点详解
2019/05/15 Python
Django通过json格式收集主机信息
2020/05/29 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
.NET方向面试题
2014/11/20 面试题
毕业生医学检验求职信
2013/10/16 职场文书
市场部专员岗位职责
2013/11/30 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
上班离岗检讨书
2014/01/27 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
运动会开幕式主持词
2015/07/01 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python