用 watchEffect 实现自动滚动到底部需监听消息列表变化、判断是否在底部、执行 DOM 滚动并清理异步冲突；通过 ref 绑定容器、nextTick 确保 DOM 更新、onInvalidate 防止重复滚动，配合 autoScrollEnabled 开关和精准 flush 时机控制。
用 watchEffect 自动滚动到页面底部，关键在于监听消息列表变化、判断当前是否处于底部、再触发 DOM 滚动操作，并配合清理机制防止异步冲突。
监听消息变化并触发滚动
当新消息加入 messages（一个 ref 数组）时，watchEffect 会自动重新执行。无需手动列出依赖项，只要在回调里读取了 messages.value.length 或遍历它，就会被追踪。
- 确保容器元素已挂载，通过
ref绑定 DOM 元素（如messagesContainerRef） - 利用
nextTick()等待 DOM 更新完成，再读取容器的滚动属性 - 检查是否接近底部：
container.scrollTop + container.clientHeight >= container.scrollHeight - 2
避免滚动被覆盖或错乱
连续快速发多条消息时，前一次的滚动可能还没执行完，后一次就已开始——这会导致滚动位置异常或卡顿。必须用 onInvalidate 清理未完成的操作。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 每次副作用执行前，
onInvalidate会自动调用上一次注册的清理函数 - 不直接操作
scrollTop，而是把滚动逻辑包装进一个可取消的异步流程（例如用Promise+ 标记位，或简单地清除定时器） - 实际中常配合
setTimeout或requestAnimationFrame做节流，但核心是保证“只生效最后一次”
支持用户手动关闭自动滚动
自动滚动不该干扰用户主动浏览历史消息。引入一个开关 autoScrollEnabled，在 watchEffect 开头判断其值，为 false 时直接返回，不执行后续逻辑。
立即学习“前端免费学习笔记（深入）”；
- 这个开关本身也是响应式数据，
watchEffect会自动追踪它 - 用户点击“回到最新”按钮时，可临时设为
true并手动滚动一次，不影响日常开关逻辑 - 避免在滚动判断中混入非响应式变量（如普通布尔常量），否则无法触发重执行
DOM 操作时机要精准
watchEffect 默认在组件更新前（flush: 'pre'）运行，此时 DOM 还没刷新，直接读取 scrollHeight 会得到旧值。必须调整执行时机或等待更新完成。
- 推荐方式：保留默认
flush，但在回调内显式调用await nextTick() - 替代方式：配置
{ flush: 'post' }，让回调在 DOM 更新后自动执行 - 不要在
watchEffect外部用watch或生命周期钩子同步处理滚动，会破坏响应式联动
