有特色的企业网站,dw响应式网站模板,wordpress自动添加视频教程,全国招商代理平台目录 说明组件是如何被缓存的#xff0c;什么时候被激活对于KeepAlive 中组件 如何完成激活的对于KeepAlive 中组件 如何完成休眠的 总结 说明
Vue 内置了 KeepAlive 组件#xff0c;实现缓存多个组件实例切换时#xff0c;完成对卸载组件实例的缓存#xff0c;从而使得组… 目录 说明组件是如何被缓存的什么时候被激活对于KeepAlive 中组件 如何完成激活的对于KeepAlive 中组件 如何完成休眠的 总结 说明
Vue 内置了 KeepAlive 组件实现缓存多个组件实例切换时完成对卸载组件实例的缓存从而使得组件实例在来会切换时不会被重复创建。
templateKeepAlive component :isxxx / /KeepAlive
/template当动态组件在随着 xxx 变化时如果没有 KeepAlive 做缓存那么组件在来回切换时就会进行重复的实例化这里就是通过 KeepAlive 实现了对不活跃组件的缓存只有第一次加载会初始化 instance后续会使用 缓存的 vnode 再强制patch 下 防止遗漏 有 组件 props 导致的更新省略了初始化 instance 和 全量生成组件dom 结构的过程。
组件是如何被缓存的什么时候被激活
先得看下 KeepAlive 的实现 它本身是一个抽象组件会将子组件渲染出来
const KeepAliveImpl {// 组件名称name: KeepAlive,// 区别于其他组件的标记__isKeepAlive: true,// 组件的 props 定义props: {include: [String, RegExp, Array],exclude: [String, RegExp, Array],max: [String, Number]},setup(props, {slots}) {// ...// setup 返回一个函数 就是 组件的render 函数 return () {// ...}}每次 子组件改变 就会触发 render 函数
看下 render 函数的详情
const KeepAliveImpl {//...// cache sub tree after renderlet pendingCacheKey: CacheKey | null nullconst cacheSubtree () {// fix #1621, the pendingCacheKey could be 0if (pendingCacheKey ! null) {cache.set(pendingCacheKey, getInnerChild(instance.subTree))}}onMounted(cacheSubtree)onUpdated(cacheSubtree)onBeforeUnmount(() {cache.forEach(cached {const { subTree, suspense } instanceconst vnode getInnerChild(subTree)if (cached.type vnode.type cached.key vnode.key) {// current instance will be unmounted as part of keep-alives unmountresetShapeFlag(vnode)// but invoke its deactivated hook hereconst da vnode.component!.dada queuePostRenderEffect(da, suspense)return}unmount(cached)})})// ...setup(props, { slot }) {// ...return () {// 记录需要被缓存的 keypendingCacheKey null// ...// 获取子节点const children slots.default()const rawVNode children[0]if (children.length 1) {// 子节点数量大于 1 个不会进行缓存直接返回current nullreturn children} else if (!isVNode(rawVNode) ||(!(rawVNode.shapeFlag ShapeFlags.STATEFUL_COMPONENT) !(rawVNode.shapeFlag ShapeFlags.SUSPENSE))) {current nullreturn rawVNode}// suspense 特殊处理正常节点就是返回节点 vnodelet vnode getInnerChild(rawVNode)const comp vnode.type// 获取 Component.name 值const name getComponentName(isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp)// 获取 props 中的属性const { include, exclude, max } props// 如果组件 name 不在 include 中或者存在于 exclude 中则直接返回if ((include (!name || !matches(include, name))) ||(exclude name matches(exclude, name))) {current vnodereturn rawVNode}// 缓存相关定义缓存 keyconst key vnode.key null ? comp : vnode.key// 从缓存中取值const cachedVNode cache.get(key)// clone vnode因为需要重用if (vnode.el) {vnode cloneVNode(vnode)if (rawVNode.shapeFlag ShapeFlags.SUSPENSE) {rawVNode.ssContent vnode}}// 给 pendingCacheKey 赋值将在 beforeMount/beforeUpdate 中被使用pendingCacheKey key// 如果存在缓存的 vnode 元素if (cachedVNode) {// 复制挂载状态// 复制 DOMvnode.el cachedVNode.el// 复制 componentvnode.component cachedVNode.component// 增加 shapeFlag 类型 COMPONENT_KEPT_ALIVEvnode.shapeFlag | ShapeFlags.COMPONENT_KEPT_ALIVE// 把缓存的 key 移动到到队首keys.delete(key)keys.add(key)} else {// 如果缓存不存在则添加缓存keys.add(key)// 如果超出了最大的限制则移除最早被缓存的值if (max keys.size parseInt(max as string, 10)) {pruneCacheEntry(keys.values().next().value)}}// 增加 shapeFlag 类型 COMPONENT_SHOULD_KEEP_ALIVE避免被卸载vnode.shapeFlag | ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVEcurrent vnode// 返回 vnode 节点return isSuspense(rawVNode.type) ? rawVNode : vnode}}
}
props.max 会确定 缓存组件的最大数量 默认没有上限但是组件会占用内存 所以并不是 max越大越好 props.include 表示包含哪些组件可被缓存 props.exclude 表示排除那些组件
组件缓存的时机 组件切换的时候 会保存 上一个组件的vnode 到 cache Map 中 key 是 vnode.key
组件卸载时机 缓存组件数量超过max会删除活跃度最低的缓存组件或者 整个KeepAlive 组件被unmount的时候
对于KeepAlive 中组件 如何完成激活的
当 component 动态组件 is 参数发生改变时
执行 KeepAlive组件 componentUpdateFn 就会执行 上一步的render 函数 会 生成 新的vnode 然后再 走 patch 再走到 processComponent
再看下 processComponent中 针对 vnode.shapeFlag 为COMPONENT_KEPT_ALIVE在keepalive render 函数中 组件类型 会被设置成COMPONENT_KEPT_ALIVE 有特殊处理 其中 parentComponent 其实指向的是 KeepAlive 组件 得出 processComponent 实际调用的是 KeepAlive 组件上下文中的 activate 方法 去做挂载操作 sharedContext.activate (vnode, container, anchor, isSVG, optimized) {const instance vnode.component!// 先直接将 move(vnode, container, anchor, MoveType.ENTER, parentSuspense)// in case props have changedpatch(instance.vnode,vnode,container,anchor,instance,parentSuspense,isSVG,vnode.slotScopeIds,optimized)queuePostRenderEffect(() {instance.isDeactivated falseif (instance.a) {invokeArrayFns(instance.a)}const vnodeHook vnode.props vnode.props.onVnodeMountedif (vnodeHook) {invokeVNodeHook(vnodeHook, instance.parent, vnode)}}, parentSuspense)if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {// Update components treedevtoolsComponentAdded(instance)}}
先直接将缓存的dom 先挂载到 container 下面节约了 重新生成dom的 时间 在强制patch 一下 避免遗漏 有props 改变引发的更新。这时候 缓存的组件就被激活了。
对于KeepAlive 中组件 如何完成休眠的
templateKeepAlive component :isxxx / /KeepAlive
/templateis 发生改变 会导致 上一次的组件执行unmount 操作
const unmount (vnode, parentComponent, parentSuspense, doRemove false) {// ...const { shapeFlag } vnodeif (shapeFlag ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {;(parentComponent!.ctx as KeepAliveContext).deactivate(vnode)return}// ...
}
同理 也会走到。keepalive 上下文中的 deactivate 方法
sharedContext.deactivate (vnode: VNode) {const instance vnode.component!move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense)queuePostRenderEffect(() {if (instance.da) {invokeArrayFns(instance.da)}const vnodeHook vnode.props vnode.props.onVnodeUnmountedif (vnodeHook) {invokeVNodeHook(vnodeHook, instance.parent, vnode)}instance.isDeactivated true}, parentSuspense)if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {// Update components treedevtoolsComponentAdded(instance)}}卸载态函数 deactivate 核心工作就是将页面中的 DOM 移动到一个隐藏不可见的容器 storageContainer 当中这样页面中的元素就被移除了。当这一切都执行完成后最后再通过 queuePostRenderEffect 函数将用户定义的 onDeactivated 钩子放到状态更新流程后
总结
1.组件是通过类似于 LRU 的缓存机制来缓存的并为缓存的组件 vnode 的 shapeFlag 属性打上 COMPONENT_KEPT_ALIVE 属性当组件在 processComponent 挂载时如果存在COMPONENT_KEPT_ALIVE 属性则会执行激活函数激活函数内执行具体的缓存节点挂载逻辑。
2.缓存不是越多越好因为所有的缓存节点都会被存在 cache 中如果过多则会增加内存负担。
3.丢弃的方式就是在缓存重新被激活时之前缓存的 key 会被重新添加到队首标记为最近的一次缓存如果缓存的实例数量即将超过指定的那个最大数量则最久没有被访问的缓存实例将被丢弃。
