示例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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 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的一个简单加密解密代码
2014/01/14 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
预防传染病方案
2014/06/14 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
2019广播稿怎么写
2019/04/17 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
业余无线电通联Q语
2022/02/18 无线电
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
服务器间如何实现文件共享
2022/05/20 Servers
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS