vue缓存
keep-alive本质作用是缓存组件
路由缓存
全部缓存
<keep-alive>
<router-view></router-view>
</keep-alive>
app.vue根组件
<template>
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
路由
{
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')
}
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>
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>
third.vue组件
<template>
<div class="third">
<h1>第三个组件</h1>
</div>
</template>
如果我点击第一页的按钮，进入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>
修改路由，需要缓存的路由添加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 }
}
这样和上面一样点击跳转，再返回 first=》second=》third=》second=》first
返回的时候就只有第一个页面的字体是红色的，有缓存；第二个页面的背景是白色，没缓存
缓存单个路由
再keep-alive标签内设置inlude属性，属性值为需要被缓存的路由名称
<keep-alive include="second">
<router-view></router-view>
</keep-alive>
组件缓存
直接再需要被缓存的组件外加一层keep-alive标签
<keep-alive include="second">
<test></test>
</keep-alive>
属性
include- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max- 数字。最多可以缓存多少组件实例
使用keep-alive的时候也要考虑下性能，不能缓存太多的东西
生命周期
vue默认有8个生命钩子函数，但是如用了 keep-alive 的时候，activated与deactivated这了两个钩子函数也生效
| 钩子函数 | 调用实际 | 说明 |
|---|---|---|
| activated | keep-alive 缓存的组件激活时调用 | |
| deactivated | 被 keep-alive 缓存的组件失活时调用 |
第一次进入页面：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修改页面是否被缓存