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编程起步(第七课)
Feb 27 Javascript
JavaScript 全角转半角部分
Oct 28 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
javascript如何实现create方法
Nov 04 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与SQL注入攻击[二]
2007/04/17 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
javascript连续赋值问题
2015/07/08 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
python中enumerate函数用法实例分析
2015/05/20 Python
Python的装饰器用法学习笔记
2016/06/24 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Puppeteer使用示例详解
2019/06/20 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
秘书岗位职责
2013/11/18 职场文书
文体活动实施方案
2014/03/27 职场文书
我爱我班主题班会
2015/08/13 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang