Vue组件缓存不保存滚动位置，需手动记录恢复；长列表必须用局部滚动容器并绑定ref，离开前用onBeforeRouteLeave保存scrollTop，激活时用nextTick恢复，并按路由参数区分独立滚动状态。
Vue 组件缓存本身不保存滚动位置，<keep-alive> 只保留组件实例和响应式状态，而 scrollTop 属于 DOM 渲染层状态，必须手动记录与恢复。对长列表（尤其是局部滚动容器），关键在于精准绑定滚动目标、时机可控、避免冲突。
明确滚动容器并绑定 ref
长列表务必使用**局部滚动容器**（如固定高度的 div），而非依赖 window 全局滚动。否则在嵌套路由或复杂布局中极易错位或失效。
- 给容器加
ref="scrollContainer"，确保它有overflow-y: auto/scroll和明确高度 - 避免用
document.body或window—— 它们在 keep-alive 激活时可能尚未就绪，且无法区分多个列表页 - 示例结构：
<div ref="scrollContainer" class="list-wrap"><ul>...</ul></div>
在 onDeactivated 或 onBeforeRouteLeave 中保存位置
离开当前组件前，立即读取并暂存滚动偏移。推荐优先使用 onBeforeRouteLeave，因为它在路由跳转前执行，比 onDeactivated 更可靠（尤其在 tab 切换或快速跳转场景下）。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 用
ref获取容器 DOM，读取scrollTop - 可存在组件内响应式变量中（适用于单页多 tab 场景），也可存入
sessionStorage（跨会话或强隔离需求） - 注意：不要在
onUnmounted里保存——组件可能已被销毁，ref 失效
在 onActivated 中恢复滚动位置
激活时恢复，但必须等 DOM 更新完成。直接赋值 scrollTop 很可能失败，因为容器可能还未渲染或尺寸未定。
立即学习“前端免费学习笔记（深入）”；
- 用
nextTick包裹scrollTo，确保 DOM 已就绪 - 恢复前建议校验容器是否存在、是否已挂载，防止空引用报错
- 若列表是动态加载（如无限滚动），可在恢复后触发一次
scroll事件，唤醒 IntersectionObserver
区分不同 tab 或参数的独立滚动状态
当列表页支持多个 tab（如「全部」「待审核」）或动态路由参数（如 /list/:type），需为每个上下文单独保存位置，否则互相覆盖。
- 用唯一 key 标识：例如
scrollPos_${route.params.type}_${route.query.tab} - 在
onActivated中根据当前路由参数读取对应 key 的位置 - 若使用组合式函数（如
useScroll），应传入带上下文的 key，而非全局复用
