示例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十个最常用的自定义函数(中文版)
Sep 07 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
js电话号码验证方法
2015/09/28 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
Python文件读取的3种方法及路径转义
2015/06/21 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
毕业生找工作推荐信
2013/11/21 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
协议书样本
2014/04/23 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
品牌推广策划方案
2014/05/28 职场文书
经销商年会策划方案
2014/05/29 职场文书
国庆节标语大全
2014/10/08 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书