keep-alive 是 Vue 的一个内置抽象组件，通常用于缓存动态组件或路由组件。
被 keep-alive 包裹的组件在切换时不会被销毁，而是会被缓存下来，下一次切换回这个组件时，会直接复用之前的实例，保持其状态。
keep-alive的几个配置属性和钩子：
1.include 和 exclude： 用于控制哪些组件需要缓存，支持字符串、正则表达式或数组。
2.max： 用于指定缓存的组件数量，当超出这个数量时，最久未使用的组件实例将被销毁。
3.activated：当组件被激活时触发（即从缓存中恢复时）。
4.deactivated：当组件被停用时触发（即被缓存时）。
keep-alive的核心原理：
keep-alive 是通过缓存组件实例来避免组件重复创建和销毁，达到性能优化的目的。它通过将已缓存的组件存储在内存中，当组件被重新激活时，直接复用之前缓存的实例，而不是重新创建。
核心原理步骤：
1.缓存实例：当组件被第一次加载时，keep-alive 会将组件的实例缓存起来。
2.组件复用：当你切换到一个已经被缓存的组件时，keep-alive 会从缓存中提取该组件的实例，而不是重新创建。
3.生命周期管理：为了处理组件的激活和停用，keep-alive 引入了 activated 和 deactivated 钩子，在组件进入或离开缓存时触发。
简单实现：
const KeepAlive = {
name: 'keep-alive', // 定义组件的名字为 keep-alive
abstract: true, // 将组件标记为抽象组件。抽象组件不会在父组件链中出现。
props: {
include: [String, RegExp, Array], // include：指定哪些组件需要被缓存，可以是字符串、正则表达式或数组。
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._vnode); // 遍历 this.cache 中的所有键，并调用 pruneCacheEntry 函数清理缓存
}
},
mounted() {
this.$watch('include', val => {
pruneCache(this, name => matches(val, name)); // 监听 include 属性的变化，并调用 pruneCache 函数清理不匹配的缓存。
});
this.$watch('exclude', val => {
pruneCache(this, name => !matches(val, name)); // 监听 exclude 属性的变化，并调用 pruneCache 函数清理匹配的缓存。
});
},
render() { // 渲染函数，定义组件的渲染逻辑。
const slot = this.$slots.default; // 获取默认插槽内容。
const vnode = getFirstComponentChild(slot); // 获取插槽内容中的第一个子组件虚拟节点。
const componentOptions = vnode && vnode.componentOptions; // 获取子组件的选项。
if (componentOptions) { // 子组件的选项 存在时，继续处理。
const name = getComponentName(componentOptions);
const { include, exclude } = this;
/**
* 检查 include 和 exclude 属性。
* 如果 include 存在且组件名称不匹配，则直接返回 vnode。
* 如果 exclude 存在且组件名称匹配，则直接返回 vnode。
*/
if (
(include && (!name || !matches(include, name))) ||
(exclude && name && matches(exclude, name))
) {
return vnode;
}
/**
* 生成缓存键 key。
* 如果 vnode.key 为空，则使用组件构造函数的 cid 和标签名生成键。
* 否则，使用 vnode.key 作为键。
*/
const key = vnode.key == null
? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key;
/**
* 检查缓存中是否存在该键。
* 如果存在，从缓存中取出组件实例，并将键移到 this.keys 的末尾。
* 如果不存在，将组件虚拟节点存入缓存，并将键添加到 this.keys。
* 如果缓存数量超过 max，则清理最早的缓存。
*/
if (this.cache[key]) {
vnode.componentInstance = this.cache[key].componentInstance;
remove(this.keys, key);
this.keys.push(key);
} else {
this.cache[key] = vnode;
this.keys.push(key);
if (this.max && this.keys.length > parseInt(this.max)) {
pruneCacheEntry(this.cache, this.keys[0], this._vnode);
}
}
vnode.data.keepAlive = true; // 标记虚拟节点为 keepAlive
}
return vnode || (slot && slot[0]); // 返回虚拟节点或插槽中的第一个子节点
}
};
/**
* 清理缓存条目。
* 获取缓存条目 entry。
* 如果存在且不等于当前虚拟节点，销毁组件实例。
* 将缓存条目置为空。
*/
function pruneCacheEntry(cache, key, current) {
const entry = cache[key];
if (entry && (!current || entry.tag !== current.tag)) {
entry.componentInstance.$destroy();
}
cache[key] = null;
}
/**
* 根据过滤条件清理缓存。
* 获取 cache、keys 和 _vnode。
* 遍历缓存，获取组件名称。
* 如果名称存在且不符合过滤条件，清理缓存条目。
*/
function pruneCache(keepAliveInstance, filter) {
const { cache, keys, _vnode } = keepAliveInstance;
for (const key in cache) {
const entry = cache[key];
if (entry) {
const name = getComponentName(entry.componentOptions);
if (name && !filter(name)) {
pruneCacheEntry(cache, key, _vnode);
}
}
}
}
/**
* 检查名称是否匹配模式。
* 如果模式是数组，检查名称是否在数组中。
* 如果模式是字符串，拆分字符串并检查名称是否在其中。
* 如果模式是正则表达式，测试名称是否匹配。
* 否则返回 false。
*/
function matches(pattern, name) {
if (Array.isArray(pattern)) {
return pattern.indexOf(name) > -1;
} else if (typeof pattern === 'string') {
return pattern.split(',').indexOf(name) > -1;
} else if (pattern.test) {
return pattern.test(name);
}
return false;
}
// 获取组件构造函数的 name 或标签名
function getComponentName(opts) {
return opts && (opts.Ctor.options.name || opts.tag);
}
// 获取第一个子组件 过滤并返回第一个有 componentOptions 的子节点。
function getFirstComponentChild(children) {
return children && children.filter(c => c && c.componentOptions)[0];
}
ps: Vue 3 的 keep-alive 原理还是缓存组件实例