vue中keep-alive实现页面缓存

keep-alive

• props:
• include - 字符串或者正则表达式。只有名称匹配的组件才会被缓存
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
• max - 数字。最多可以缓存多少组件实例
• 用法：
  <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
  当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

在 2.2.0 及其更高版本中， activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发

主要用于保留组件状态或避免重新渲染

 <!-- 基本 -->
 <keep-alive>
   <router-view></router-view>
 </keep-alive>
 <!-- 多个条件判断的子组件 -->
 <keep-alive>
   <router-view v-if="a >1"></router-view>
   <router-view v-else></router-view>
 </keep-alive>
 <!-- 和 <transition> 一起使用 -->
 <transition>
   <keep-alive>
     <router-view></router-view>
   </keep-alive>
 </transition>

注意<keep-alive> 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染
先简单演示一下 keep-alive 的用法
home.vue 是主页面，里面有两个子页面 one.vue 和 two.vue
home.vue

<template>
  <div>
    <p>home页面</p>
    <router-link to="/home/one">one</router-link>
    <router-link to="/home/two">two</router-link>
    <!-- activated、deactivated这两个生命周期函数只有在使用了 keep-alive 组件的时候才会被触发 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'home'
}
</script>

在 home.vue 页面中路由被 <keep-alive> 包裹住
one.vue

<template>
  <div>
    <p>one</p>
    <div>
      <span v-for="(item, key) in tabs" :class="{selected: key == currentTab}" :key="key" @click="changeTab(key)">{{ item.name }}</span>
    </div>
    <div class="current-content" v-show="currentTab === 'btn1'">
      <p>按钮1的内容</p>
    </div>
    <div class="current-content" v-show="currentTab === 'btn2'">
      <p>按钮2的相关内容</p>
      <p>哈啊啊啊啊啊啊啊啊啊啊啊</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'one',
  // 页面第一次进入，钩子函数触发顺序：created-> mounted -> activated，退出页面触发 deactivated。
  // 当再次进入页面(前进或后退)时，只会触发 activated
  data() {
    return {
      tabs: {
        btn1: {
          name: '按钮1',
          value: ''
        },
        btn2: {
          name: '按钮2',
          value: ''
        }
      },
      currentTab: 'btn1'
    }
  },
  methods: {
    changeTab(key) { 
     this.currentTab = key
    }
  },
  created() {
    console.log('我是第一个created')
  },
  mounted() {
    console.log('我是第二个mounted')
  },
  activated() {
    console.log('我是第三个activated')
  },
  deactivated() {
    console.log('我是deactivated')
  }
}
</script>

<style scoped>
.selected {color: #2680bf;border: 1px solid #2680bf;}
</style>

two.vue

<template>
  <div>two</div>
</template>

<script>
export default {
  name: 'two'
}
</script>

使用了 keep-alive 的页面效果

测试结果分析：

activated和deactivated

• 使用了 keep-alive 后，在one页面中选中按钮2，切换到two页面后，再切换回来，还是选中了按钮2。页面进行了缓存。
• activated 和 deactivated 这两个生命周期函数只有在使用了 keep-alive 组件后才会执行
• 页面第一次进入时，钩子函数的触发顺序是 created -> mounted -> activated ，退出时才会触发 deactivated。当再次进入页面 （前进或后退）时，只会触发 activated。

include和exclude

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

<!--逗号分隔字符串-->
<keep-alive include="one,two">
  <router-view></router-view>
</keep-alive>

<!--正则表达式（使用v-bind)-->
<keep-alive :include="/one|two/">
  <router-view></router-view>
</keep-alive>

<!--数组（使用v-bind)-->
<keep-alive :include="['one','two']">
  <router-view></router-view>
</keep-alive>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称（父组件 components 选项的键值）。匿名组件不能被匹配。

max

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已经缓存组件中最久没有被访问的实例会被销毁掉

<keep-alive :max="10">
  <router-view></router-view>
</keep-alive>

keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。

keep-alive 部分使用实例

结合router，缓存部分页面

使用 $route.meta的 keepAlive 属性

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

需要在 router的路由配置中设置 router 的元信息 meta，

• keepAlive：这个路由是否需要缓存
• deepth：深度，也就是页面之间的前进后退的层次关系，可选

{
  path: '/home',
  name: 'home',
  component: home,
  meta: {
  	keepAlive: true, // 需要缓存，为false，则表示不需要缓存
  	deepth: 1
  },
}

然后可以实时监听路由的变化

data() {
  return {
    include: []
  };
},
watch: {
   $route(to, from) {
     // 如果要to(进入)的页面是需要keepAlive缓存的，把name push进include数组中
     if (to.meta.keepAlive) {
       !this.include.includes(to.name) && this.include.push(to.name);
     }
     // 如果 要 form(离开) 的页面是 keepAlive缓存的，
     // 再根据 deepth 来判断是前进还是后退
     // 如果是后退：
     if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
       const index = this.include.indexOf(from.name);
       index !== -1 && this.include.splice(index, 1);
     }
   }
 }

其实一共需要两步：设置 meta，监听路由并判断。
注意：
你的路由中定义的 name 和页面中定义的 name 一定要全等，并区分大小写

{
   path: '/home',
   name: 'home', // 两者之间 name 的值要完全一样
   component: home,
   meta: { title: pageTitle},
}

export default {
  name: 'home' // 两者之间 name 的值要完全一样
}

当然，也可以通过动态设置route.meta的keepAlive属性来实现其他需求，

首页是A页面
B页面跳转到A，A页面需要缓存
C页面跳转到A，A页面不需要被缓存
思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive：