vue中如何使用keep-alive缓存组件
项目需求
现在项目中有需要用户输入大量信息的页面，在最下面有一个查看协议的跳转链接。要求用户在输入完信息后去查看协议里面的内容，返回的时候之前输入的数据还在，避免用户重复输入数据。
需求分析
在看到这个需求之后，我的第一想法就是将用户之前输入的数据一一存起来，在查看完协议返回后，将之前的数据再放回去。可是这样操作实在太麻烦，每一项数据都要进行存储和读写，那有没有办法直接将我这个组件缓存起来呢？直到我看到了keep-alive
主角登场
什么是keep-alive
keep-alive是vue中一个内置组件，放置在keep-alive中的组件都会在内存中缓存起来，下次进入的时候就不会需要重新加载，直接从内存中取出来即可，避免一个重复渲染。
基本使用
- 用法
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：
-
include- 字符串或正则表达式。只有名称匹配的组件会被缓存。 -
exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存 -
max最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
解决问题
看完keep-alive之后，这个需求就很简单。只需要将输入数据的页面给他缓存起来就行，当我从协议那边返回的时候，直接从内存里面取组件。如果我是从其他页面进来，就重新加载组件。
- 方法一
我在
app.vue里面我watch一下路由，我默认的就只缓存输入数据的页面，如果是从其他页面进来我就不缓存任何页面。
<keep-alive :include="keepActive">
<router-view ></router-view>
</keep-alive>
data() {
return {
keepActive: []
}
}
watch:{
$route(to, from) {
this.keepActive = ['userInfo']
if(to.name == 'protocol' || to.name == 'home') {
this.keepActive = []
}
}
}
- 方法二
可以在
router.vue里面，给指定需要缓存的组件配置上路由元信息，通过判断设置的这个路由元信息是否存在，从而来缓存指定组件。
- 方法三
有人就说，你只需要缓存一个组件就行，为什么不直接丢到
include里面？如果任何需求都是想的那么简单，咱们程序员也不会每天抠脑门抠到掉发了。如果只缓存用户输入数据页面，我从首页进入到用户输入数据的页面的时候，只要你之前输入过数据，这个数据还是会存在。所以我们在使用的时候，要根据自己的业务需求来，如果从任何页面进来都需要缓存，include大胆的用。如果有指定的页面缓存，还是还是要配合路由来使用。功能已经有了，怎么实现还得根据特定的项目需求来。
踩坑
我在设置指定的缓存组件时，始终发现组件缓存不生效。反复核对代码，确定无误，实在是找不出毛病，但他就是不生效。其实就是因为include配置的name和组件内的name不一样，我在router文件中配置的name为大写，组件内部的name为小写...提示一点，如果不加name缓存也不会生效
