vue缓存keepAlive

vue缓存

keep-alive本质作用是缓存组件

路由缓存

全部缓存

    <keep-alive>
      <router-view></router-view>
    </keep-alive>
1
2
3

app.vue根组件

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
1
2
3
4
5
6
7

路由

  {
    path: '/first',
    name: 'first',
    component: () => import('../views/alive.vue/first.vue')
  },
  {
    path: '/second',
    name: 'second',
    component: () => import('../views/alive.vue/second.vue')
  },
  {
    path: '/third',
    name: 'third',
    component: () => import('../views/alive.vue/third.vue')
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

first.vue组件

<template>
  <div class="first">
    <h1 class="title">第一个组件</h1>
    <button @click="toSecond">跳到第二个组件</button>
  </div>
</template>
<script>
export default {
  name: 'first',
  methods: {
    toSecond() {
      document.querySelector('.title').style.color = 'red'
      this.$router.push('/second')
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

second.vue组件

<template>
  <div class="second">
    <h1>第二个组件</h1>
    <button @click="toThird">跳到第三个组件</button>
  </div>
</template>
<script>
export default {
  name: 'second',
  created() {
    console.log('second created')
  },
  methods: {
    toThird() {
      document.querySelector('.second').style.backgroundColor = 'green'
      this.$router.push('/third')
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

third.vue组件

<template>
  <div class="third">
    <h1>第三个组件</h1>
  </div>
</template>
1
2
3
4
5

如果我点击第一页的按钮，进入second页面，点击第二页的按钮，进入第三个页面;

然后返回second,第二个组件second.vue的背景色是绿色的

再返回first，第一个组件title的文字是红色的

所有的组件都被缓存了

部分（多个或一个）缓存

修改app.vue跟组件

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

修改路由，需要缓存的路由添加meta属性，且是否缓存keepAlive键的值设置为true

  {
    path: '/first',
    name: 'first',
    component: () => import('../views/alive.vue/first.vue'),
    meta: { keepAlive: true }
  },
  {
    path: '/second',
    name: 'second',
    component: () => import('../views/alive.vue/second.vue')
  },
  {
    path: '/third',
    name: 'third',
    component: () => import('../views/alive.vue/third.vue'),
    meta: { keepAlive: false }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样和上面一样点击跳转，再返回 first=》second=》third=》second=》first

返回的时候就只有第一个页面的字体是红色的，有缓存；第二个页面的背景是白色，没缓存

缓存单个路由

再keep-alive标签内设置inlude属性，属性值为需要被缓存的路由名称

    <keep-alive include="second">
      <router-view></router-view>
    </keep-alive>
1
2
3

组件缓存

直接再需要被缓存的组件外加一层keep-alive标签

    <keep-alive include="second">
      <test></test>
    </keep-alive>
1
2
3

属性

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例

使用keep-alive的时候也要考虑下性能，不能缓存太多的东西

生命周期

vue默认有8个生命钩子函数，但是如用了 keep-alive 的时候，activated与deactivated这了两个钩子函数也生效

第一次进入页面：beforeCreate=>created=>beforeMount=>mounted=>activated

离开：deactivated

再次进入：activated

原理

LRU算法：一种缓存淘汰策略（Least Recently Used）；LRU判定最近使用过的数据为有用的，很久都没用过的数据是无用的，在内存满了就优先删除很久未使用，也就是无用的数据。

①接收一个capacity的参数作为缓存的最大容量

②实现put(key,value)方法存入键值对

③实现get(key)方法获取key对应的value，若不存在返回-1

具体的逻辑：

1》keep-alive在内部维护了一个key的数组和一个缓存对象，keys数组记录目前缓存的组件key值，cache对象会以key值为键，值为vnode

2》在render函数中，（针对使用keep-alive的组件）会与exclude/include黑白名单匹配，如果能匹配则继续往下执行，不能匹配(不在白名单中，或在黑名单中)则冲新生成虚拟dom

3》如果缓存过组件，则直接取出缓存，并更新组件的key在key数组中的位置；

4》如果没有缓存则在keys数组和cache对象保存此组件，并检查数量是否超过max，超过则根据LRU算法进行删除

动态缓存的实现思路

首页（A）、列表页（B）、详情页（C），一般可以从：A->B->C；

要求动态缓存B页面：C->B时保持缓存，A->B时放弃缓存

实现：

定义一个全局的缓存数组，通过keep-alive的include属性传入全局数组，或在路由的meta中通过keepAlive属性判断是否缓存

路由钩子中需修改缓存状态，beforeEach和beforeRouteLeave修改页面是否被缓存