24

到现在,接触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会请求数据,后面就不会再次请求而是直接调用缓存的

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


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

14 条评论
周旭 · 2017年10月20日

太感谢了,又get新技能,已收藏。

+1 回复

1

哈哈哈,有用就行

我是帅帅的玉米 作者 · 2017年10月23日
冰扬 · 2017年11月09日

兄弟,现在有个需求,其中三个页面。列表页 ----> 详情页 ----> 购买页。依次前进时是不需要缓存的。比如点击列表页进入详情页时,详情页得请求数据。详情页进购买页时,购买页也得请求数据。但是后退时(浏览器自带后退键),就不能再请求数据了,得用之前缓存的数据。比如,购买页后退到详情页时,还保持之前的状态,位置。从详情页再后退到列表页时,列表页还是之前的状态,不再重新请求,滚动条位置还是之前的位置。
不知道我说明白没有,就是这么个问题。

回复

0
我是帅帅的玉米 作者 · 2017年11月09日
0

这个链接点不了,你去找我的文章“【vue-router②】使用导航守卫控制页面前进刷新,后退缓存”,里面就有提到怎么控制

我是帅帅的玉米 作者 · 2017年11月09日
zengfan · 2018年09月29日

非常感谢

回复

zengfan · 2018年09月29日

朋友,有个问题是当多个‘新增页’ 开启keep-alive时,新增页里的内容都不更新了。。

回复

0

建议一下,写例子的时候router-view 把key也带上,不然多个页面缓存会出问题

zengfan · 2018年09月29日
wj_____ · 2018年11月13日

你好,现在这边有个问题是,b页面新增数据->a不需要缓存要刷新->然后c详情页->a需要缓存,但是a页面缓存的还是最开始没有新增数据的那个,应该怎么解决啊?

回复

YOUNGmaxer · 1月20日

嗯,定义想要缓存的组件还可以用到 includeexclude

回复

name · 2月28日

加 keep 如果是添加新的数据呢?不刷新怎么能出来

回复

0

亲亲,看清楚文章哦,加keep是可以自己填写参数控制刷新或者不刷新的

我是帅帅的玉米 作者 · 4月2日
liu_z · 8月28日

我遇到一个问题,就是我的项目中有2个页面(A页面,B页面)都设置了keep-alive=true,需要缓存数据功能,然后在访问A页面的时候通过导航栏跳转到B页面的时候,B页面的数据不会请求了!不知道为什么会这样子?

回复

0

https://segmentfault.com/a/11... 亲可以看下这篇文章,不知道能不能帮到你

我是帅帅的玉米 作者 · 9月11日
载入中...