从一堆 Bug 到一行代码：我是如何用 keep-alive 优雅解决 Vue 滚动位置恢复的

本文记录了一个大二学生在开发校园论坛时，为"从帖子详情页返回首页时保留滚动位置和分区状态"这个看似简单的需求，经历了手动保存/恢复、ResizeObserver、setTimeout 等一系列方案均以失败告终后，最终用 Vue 内置的 <keep-alive> 组件一行代码优雅解决的完整过程。如果你也在 Vue 项目中遇到类似问题，希望本文能让你少走弯路。

前言

我的校园论坛（江农论坛）是一个 Vue3 单页应用，首页是一个帖子列表，支持分区筛选和无限滚动加载。用户在首页浏览一段时间后，点击某条帖子进入详情页，看完后点"← 回到首页"，期望回到刚才浏览的位置，而不是滚回顶部。

这个需求在大多数内容类应用中都很常见，看起来也不复杂。但我在实现过程中，却踩了一连串的坑。

一、初始方案：手动保存和恢复滚动位置

我的第一反应是用 Pinia Store 手动保存 window.scrollY，返回时用 window.scrollTo 恢复。

保存位置（在帖子详情页离开前）：

javascript 复制代码

function goHome() {
  postsStore.saveScrollPosition()  // 存下当前的 scrollY
  router.back()
}

恢复位置 （在首页 onMounted 里）：

javascript 复制代码

onMounted(() => {
  postsStore.restoreScrollPosition() // 用 scrollTo 滚回去
})

Store 里的实现很简单，就是用 nextTick 等 DOM 更新完成后执行滚动。

问题立刻出现了：

移动端会"闪一下"------页面先渲染在顶部，然后突然跳到保存的位置。
如果从分区页面进入，返回时不仅位置没恢复对，有时还会跳到分区导航栏上方。

二、第一次修补：加延时、ResizeObserver

为了解决"闪"的问题，我在 restoreScrollPosition 里加了 setTimeout，给浏览器更多渲染时间。但即使延迟 100ms，有时还是差一点。

于是引入了 ResizeObserver：监听页面高度变化，等高度稳定后再滚动。同时加了一个 isRestoringScroll 标记，防止恢复过程中 handleScroll 触发 loadMorePosts 干扰。

javascript 复制代码

function restoreScrollPosition() {
  nextTick(() => {
    const observer = new ResizeObserver(() => {
      // 高度稳定后执行滚动
    })
    observer.observe(document.documentElement)
  })
}

新问题又来了：

在某些情况下，ResizeObserver 在恢复完成后仍然监听，用户正常下滑时，高度变化又触发了滚动恢复，导致页面突然跳回之前的位置。
加了 isRestoringScroll 标记、2 秒兜底等逻辑后，代码越来越复杂，但 bug 仍然间歇性出现。

三、放弃手动方案，转向 keep-alive

在反复修补无果后，我意识到问题的根源：我在用"手动命令式"的方式，去解决一个"声明式框架"中的状态保持问题。

Vue 本身已经提供了缓存组件状态的机制------<keep-alive>。它的工作原理是：被 keep-alive 包裹的组件在切换时不会被销毁，而是被缓存起来，再次切回来时直接复用，所有响应式状态（数据、滚动位置、DOM 状态）都原样保留。

这意味着：

不需要手动保存 scrollY
不需要 scrollTo
不需要 ResizeObserver
不需要任何延时逻辑

我需要做的只是：

给首页组件加一个名字：

vue 复制代码

<script setup>
defineOptions({ name: 'HomeView' })
// ...
</script>

在 App.vue 里用 <keep-alive> 包裹 <router-view>：

html 复制代码

<router-view v-slot="{ Component }">
  <keep-alive include="HomeView">
    <component :is="Component" />
  </keep-alive>
</router-view>

删掉所有手动保存/恢复滚动位置的代码。PostDetail.vue 里的 goHome 只保留：

javascript 复制代码

function goHome() {
  router.back()
}

然后，一切就好了。

四、为什么 keep-alive 是最优解

对比维度	手动方案	keep-alive
代码量	Store 里 100+ 行，Home.vue 里 30+ 行	App.vue 里 5 行，Home.vue 里 0 行
可靠性	间歇性 bug，移动端闪烁	完全稳定
维护成本	高，每次加新功能都要考虑是否影响恢复逻辑	零
性能	ResizeObserver 持续监听，有开销	组件缓存，切换更快
适用范围	只解决了滚动位置	所有状态（分区、滚动、数据）自动保持

手动方案的致命缺陷在于：你永远无法精确预测页面何时"渲染完毕"。 图片加载、异步数据返回、子组件更新，每一个都可能改变页面高度。你再怎么调 setTimeout、ResizeObserver，都是在和一个异步的、不确定的对手赛跑。

keep-alive 的思路是：既然组件没有销毁，为什么还需要"恢复"？它本来就没变过。

五、总结与感受

这个功能让我深刻体会到：

优先用框架提供的机制解决问题。 Vue 的 keep-alive 就是为"组件状态保持"设计的，在动手写复杂的自定义逻辑之前，先想想框架有没有现成的方案。
Bug 修不好，可能是方案本身就错了。 我在手动方案上花了几个小时，加各种补丁，但每次修复都引出新问题。这时候不应该继续打补丁，而是重新审视方案本身。
简单就是最好的。 最终生效的代码只有 5 行，删掉了几百行。代码越少，bug 越少。

项目状态更新：

已完成功能：帖子发布、评论互动、分区浏览、树洞匿名、首页推荐、个人主页、管理员审核、白名单注册、敏感词过滤、网络安全加固
最后一项：消息通知（开发中）

如果你也在 Vue 项目中遇到类似问题，欢迎评论区交流你的解决方案。