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对象的property和prototype是这样一种关系
Mar 24 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 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
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
php中的依赖注入实例详解
2019/08/14 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
js 通用订单代码
2013/12/23 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
js模拟微博发布消息
2017/02/23 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
python创建线程示例
2014/05/06 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
python开根号实例讲解
2020/08/30 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
综合办公室主任岗位职责
2015/04/01 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
部门主管竞聘书
2015/09/15 职场文书
python全面解析接口返回数据
2022/02/12 Python
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android