vue使用keep-alive实现数据缓存不刷新


Posted in Javascript onOctober 21, 2017

到现在,接触vue也小段时间了,项目进行到了一定程度,然而项目缺少了缓存机制,所以每次跳转页面都会重新created一下数据,虽说系统的数据请求速度很快,但是这样做对系统的性能会有很大的坏处的,所以到这里就要对系统优化下,添加缓存了。

其实到现在,对于vue还是没有玩通,每深挖一次,就会发现一次vue的精彩,开始不清楚要用什么实现缓存,找了好久,有好几种说法,就是用vuex、vuet或者keep-alive,然后对比了一下,在我认为,vuex和vuet是实现状态管理,重心是在数据处理上;想要实现整体的缓存,阻止created的刷新,就要用keep-alive。

所以这里我想要给大家介绍下如何用keep-alive实现缓存的页面?其实很简单,就是几句话而已。

1、keep-alive要配合router-view使用,这里要注意一点就是,keep-alive本身是vue2.0的功能,并不是vue-router的,所以再vue1.0版本是不支持的。keep-alive官方文档点这里,代码实现如下,router-view是在入口APP.vue里面

<template>
 <div id="app">

  <keep-alive>
   <router-view></router-view>
  </keep-alive>
  
  <!--这里是其他的代码-->
 </div>
</template>

2、这样就会实现组件的缓存,但是有个缺点就是所有组件都会被缓存,可是现实中就是我们有些页面还是要及时刷新的,比如列表数据,想要查看详情的时候都是共用一个组件,只是刷新页面,所以这个共用的组件是不能够缓存的,不然会造成点其他的条目都是之前缓存的数据。那要怎么自定义呢,那就要在router-view里面多加个v-if判断了,然后在router定义的文件里面在想要缓存的页面多加上“meta:{keepAlive:true}”,不想要缓存就是“meta:{keepAlive:false}”或者不写,只有为true的时候是会被keep-alive识别然后缓存的。

<template>
 <div id="app">
  <!--缓存想要缓存的页面,实现后退不刷新-->
  <!--加上v-if的判断,可以自定义想要缓存的组件,自定义在router里面-->
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  
  <!--这里是其他的代码-->
 </div>
</template>

3、在router文件加上meta判断

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
  {//home会被缓存
    path:"/home",
    component:home,
    meta:{keepAlive: true}
  }
  {//hello不会被缓存
    path:"/hello",
    component:hello,
    meta:{keepAlive: false}
  }
})

想要看有没有缓存成功,可以在各个组件的created钩子里面打印输出标志,缓存成功就是首次进入页面,created会请求数据,后面就不会再次请求而是直接调用缓存的

添加了缓存可以大大减少对系统性能的损坏,毕竟做数据处理型的系统,数据过于庞大,每次都要请求一下页面是很不好的,有了缓存,该缓存的缓存,不想缓存也可以实时刷新

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

Javascript 相关文章推荐
javascript 贪吃蛇实现代码
Nov 22 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 #Javascript
Vue filter介绍及其使用详解
Oct 21 #Javascript
详解node nvm进行node多版本管理
Oct 21 #Javascript
JS实现瀑布流布局
Oct 21 #Javascript
js实现Tab选项卡切换效果
Jul 17 #Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 #Javascript
js注册时输入合法性验证方法
Oct 21 #Javascript
You might like
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python自动化之Ansible的安装教程
2019/06/13 Python
python实现月食效果实例代码
2019/06/18 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
行政管理专业推荐信
2013/11/02 职场文书
给男朋友的道歉信
2014/01/12 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
统招统分证明
2015/06/23 职场文书
Python+pyaudio实现音频控制示例详解
2022/07/23 Python