Vue keepalive切换标签滚动回顶因onDeactivated时DOM已脱离文档

在Vue多标签页应用中，开发者常通过onDeactivated与onActivated钩子保存和恢复滚动位置，但实际运行时 scrollTop 恒为0，导致切换标签后页面强制回顶。问题本质在于Vue 3的KeepAlive组件执行逻辑：先同步将目标组件DOM从真实文档移入游离容器storageContainer，再异步触发onDeactivated钩子。此时元素isConnected为false，浏览器重置其scrollTop为0，即使引用存在也无法获取真实偏移量。对比发现，beforeUnmount虽能读取正确值，但仅在组件真正销毁时触发，不适用于keep-alive缓存场景——若标签未被再次激活，该钩子永不执行，造成状态丢失。可靠方案是放弃依赖生命周期时序，改用滚动事件实时更新位置映射表（如Map），并在onActivated中恢复；或结合ref与watch监听滚动容器变化。值得注意的是，Vue 2因使用v-show隐藏组件、DOM始终在文档内，此问题不显著；而Vue 3为提升性能物理移除DOM，带来此副作用。社区已有封装方案如vue-keep-scroll或useScroll+useStorage实现跨标签滚动持久化，但核心原则不变：滚动位置采集必须发生在DOM仍处于活动文档上下文内。该问题揭示框架底层操作与开发者直觉间的张力，提醒工程师需深入理解渲染管线与DOM生命周期，避免将‘看似正确’的代码误判为配置错误。