KeepAlive是什么
KeepAlive借鉴http协议，在http中KeepAlive是避免链接频繁的销毁和创建，那vue中的KeepAlive是什么呢，它的作用是避免组件被频繁的销毁和创建。
KeepAlive组件的实现需要渲染器的支持
为什么KeepAlive组件的实现需要渲染器的支持呢，是因为KeepAlive组件在卸载时，是将KeepAlive从一个容器搬到另外一个隐藏的容器，实现假卸载。当被搬运的组件需要再次被挂载的时候，是把其从隐藏的容器中搬到原容器。这个过程对应组件的生命周期是activated和的deactivated。
缓存机制
KeepAlive 组件是通过LRU算法来实现缓存机制。（暂不讲解下一篇文章讲述）
缓存实现
代码语言：javascript复制const KeepAliveImpl = {
__isKeepAlive: true,
inheritRef: true,
props: {
include: [String, RegExp, Array],
exclude: [String, RegExp, Array],
max: [String, Number]
},
setup(props: KeepAliveProps, { slots }: SetupContext){
// 省略其他代码...
return()=>{
if (!slots.default) {
return null
}
const children = slots.default()
let vnode = children[0]
if (children.length > 1) {
current = null
return children
} else if (
!isVNode(vnode) ||
!(vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT)
) {
current = null
return vnode
}
// 省略其他代码...
return vnode
}
}
}从代码看出，KeepAlive是通过 Composition API 实现，KeepAlive的实现是通过拿到子节点（const children = slots.default()），获取第一个子节点的值（let vnode = children[0] ），存在多个子节点的时候，keepAlive组件不生效了，直接返回。
总结
本篇文章主要了解KeepAlive 实际上是一个抽象节点，渲染的是它的第一个子节点，下一篇文章将讲述了解它的缓存设计、Props 设计和卸载过程。
