先了解什么是keep-alive,再举个简单的例子，分析原理、举一个常见业务的例子，是否有更好的性能优化？
一、Keep-alive 是什么
include 和 exclude 是 vue-keep-alive 的属性，可以用于更精细地控制哪些组件应该被缓存。
include：一个数组，包含应该被缓存的组件名。只有列表中的组件会被缓存。exclude：一个数组，包含不应该被缓存的组件名。列表外的组件会被缓存。
这两个属性可以同时使用，但 include 的优先级更高。
下面是一个示例：
<template>
<div>
<button @click="toggleComponent">切换组件</button>
<keep-alive :include="['ComponentA']">
<component :is="currentComponent"></component>
</keep-alive>
</div>
</template>
<script>
export default {
data() {
return {
currentComponent: 'ComponentA'
}
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
}
}
}
</script>
在这个示例中，我们使用 include 属性来指定只有 ComponentA 应该被缓存。当用户切换到 ComponentB 时，ComponentB 不会被缓存，因此每次切换回 ComponentA 时，都需要重新渲染。
如果你想要排除某个组件被缓存，可以使用 exclude 属性。例如：
wrap_textheart_pluscontent_pastekeyboard_return
<keep-alive :exclude="['ComponentB']">
<component :is="currentComponent"></component>
</keep-alive>
在这个示例中，所有组件都会被缓存，除了 ComponentB。
deactivate 什么时候用？
deactivate 是 vue-keep-alive 的一个钩子函数，它会在组件被停用（即从 DOM 中移除）时被调用。这个钩子函数可以用于在组件被停用前执行一些清理操作，比如取消定时器、清除事件监听器等。
下面是一个示例：
<template>
<div>
<button @click="toggleComponent">切换组件</button>
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
</div>
</template>
<script>
export default {
data() {
return {
currentComponent: 'ComponentA'
}
},
methods: {
toggleComponent() {
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
}
},
components: {
ComponentA: {
template: '<div>Component A</div>',
deactivated() {
console.log('Component A 被停用');
}
},
ComponentB: {
template: '<div>Component B</div>'
}
}
}
</script>
在这个示例中，我们定义了两个组件 ComponentA 和 ComponentB。ComponentA 组件定义了一个 deactivated 钩子函数，当该组件被停用时会在控制台输出一条消息。
当用户点击按钮切换组件时，当前活动的组件会被停用，然后加载新的组件。在这个过程中，ComponentA 的 deactivated 钩子函数会被调用。
二、使用场景
使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive
举个栗子:
当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive
从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive
在路由中设置keepAlive属性判断是否需要缓存
复制代码
{
path: 'list',
name: 'itemList', // 列表页
component (resolve) {
require(['@/pages/item/list'], resolve)
},
meta: {
keepAlive: true,
title: '列表页'
}
}
使用<keep-alive>
复制代码
<div id="app" class='wrapper'>
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
三、原理分析
keep-alive是vue中内置的一个组件
源码位置：src/core/components/keep-alive.js
复制代码
export default {
name: 'keep-alive',
abstract: true,
props: {
include: [String, RegExp, Array],
exclude: [String, RegExp, Array],
max: [String, Number]
},
created () {
this.cache = Object.create(null)
this.keys = []
},
destroyed () {
for (const key in this.cache) {
pruneCacheEntry(this.cache, key, this.keys)
}
},
mounted () {
this.$watch('include', val => {
pruneCache(this, name => matches(val, name))
})
this.$watch('exclude', val => {
pruneCache(this, name => !matches(val, name))
})
},
render() {
/* 获取默认插槽中的第一个组件节点 */
const slot = this.$slots.default
const vnode = getFirstComponentChild(slot)
/* 获取该组件节点的componentOptions */
const componentOptions = vnode && vnode.componentOptions
if (componentOptions) {
/* 获取该组件节点的名称，优先获取组件的name字段，如果name不存在则获取组件的tag */
const name = getComponentName(componentOptions)
const { include, exclude } = this
/* 如果name不在inlcude中或者存在于exlude中则表示不缓存，直接返回vnode */
if (
(include && (!name || !matches(include, name))) ||
// excluded
(exclude && name && matches(exclude, name))
) {
return vnode
}
const { cache, keys } = this
/* 获取组件的key值 */
const key = vnode.key == null
// same constructor may get registered as different local components
// so cid alone is not enough (#3269)
? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key
/* 拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存 */
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance
// make current key freshest
remove(keys, key)
keys.push(key)
}
/* 如果没有命中缓存，则将其设置进缓存 */
else {
cache[key] = vnode
keys.push(key)
// prune oldest entry
/* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
vnode.data.keepAlive = true
}
return vnode || (slot && slot[0])
}
}
可以看到该组件没有template，而是用了render，在组件渲染的时候会自动执行render函数
this.cache是一个对象，用来存储需要缓存的组件，它将以如下形式存储：
kotlin
复制代码
this.cache = {
'key1':'组件1',
'key2':'组件2',
// ...
}
在组件销毁的时候执行pruneCacheEntry函数
php
复制代码
function pruneCacheEntry (
cache: VNodeCache,
key: string,
keys: Array<string>,
current?: VNode
) {
const cached = cache[key]
/* 判断当前没有处于被渲染状态的组件，将其销毁*/
if (cached && (!current || cached.tag !== current.tag)) {
cached.componentInstance.$destroy()
}
cache[key] = null
remove(keys, key)
}
在mounted钩子函数中观测 include 和 exclude 的变化，如下：
复制代码
mounted () {
this.$watch('include', val => {
pruneCache(this, name => matches(val, name))
})
this.$watch('exclude', val => {
pruneCache(this, name => !matches(val, name))
})
}
如果include 或exclude 发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行pruneCache函数，函数如下：
scss
复制代码
function pruneCache (keepAliveInstance, filter) {
const { cache, keys, _vnode } = keepAliveInstance
for (const key in cache) {
const cachedNode = cache[key]
if (cachedNode) {
const name = getComponentName(cachedNode.componentOptions)
if (name && !filter(name)) {
pruneCacheEntry(cache, key, keys, _vnode)
}
}
}
}
在该函数内对this.cache对象进行遍历，取出每一项的name值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用pruneCacheEntry函数将其从this.cache对象剔除即可
关于keep-alive的最强大缓存功能是在render函数中实现
首先获取组件的key值：
javascript
复制代码
const key = vnode.key == null?
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key
拿到key值后去this.cache对象中去寻找是否有该值，如果有则表示该组件有缓存，即命中缓存，如下：
scss
复制代码
/* 如果命中缓存，则直接从缓存中拿 vnode 的组件实例 */
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance
/* 调整该组件key的顺序，将其从原来的地方删掉并重新放在最后一个 */
remove(keys, key)
keys.push(key)
}
直接从缓存中拿 vnode 的组件实例，此时重新调整该组件key的顺序，将其从原来的地方删掉并重新放在this.keys中最后一个
this.cache对象中没有该key值的情况，如下：
复制代码
/* 如果没有命中缓存，则将其设置进缓存 */
else {
cache[key] = vnode
keys.push(key)
/* 如果配置了max并且缓存的长度超过了this.max，则从缓存中删除第一个 */
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
表明该组件还没有被缓存过，则以该组件的key为键，组件vnode为值，将其存入this.cache中，并且把key存入this.keys中
此时再判断this.keys中缓存组件的数量是否超过了设置的最大缓存数量值this.max，如果超过了，则把第一个缓存组件删掉
四、思考题：缓存后如何获取数据
解决方案可以有以下两种：
- beforeRouteEnter
- actived
beforeRouteEnter
每次组件渲染的时候，都会执行beforeRouteEnter
javascript
复制代码
beforeRouteEnter(to, from, next){
next(vm=>{
console.log(vm)
// 每次进入路由执行
vm.getData() // 获取数据
})
},
actived
在keep-alive缓存的组件被激活的时候，都会执行actived钩子
javascript
复制代码
activated(){
this.getData() // 获取数据
},
注意：服务器端渲染期间avtived不被调用
