vue中如何使用keep-alive缓存组件

项目需求

现在项目中有需要用户输入大量信息的页面，在最下面有一个查看协议的跳转链接。要求用户在输入完信息后去查看协议里面的内容，返回的时候之前输入的数据还在，避免用户重复输入数据。

需求分析

在看到这个需求之后，我的第一想法就是将用户之前输入的数据一一存起来，在查看完协议返回后，将之前的数据再放回去。可是这样操作实在太麻烦，每一项数据都要进行存储和读写，那有没有办法直接将我这个组件缓存起来呢？直到我看到了keep-alive

主角登场

什么是keep-alive

keep-alive是vue中一个内置组件，放置在keep-alive中的组件都会在内存中缓存起来，下次进入的时候就不会需要重新加载，直接从内存中取出来即可，避免一个重复渲染。

基本使用

• 用法

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
• max 最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

解决问题

看完keep-alive之后，这个需求就很简单。只需要将输入数据的页面给他缓存起来就行，当我从协议那边返回的时候，直接从内存里面取组件。如果我是从其他页面进来，就重新加载组件。

• 方法一

我在app.vue里面我watch一下路由，我默认的就只缓存输入数据的页面，如果是从其他页面进来我就不缓存任何页面。

        


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缓存也不会生效