Vue 响应式侦听如何利用 watchEffect 自动调整页面滚动位置的副作用

用 watchEffect 实现自动滚动到底部需监听消息列表变化、判断是否在底部、执行 DOM 滚动并清理异步冲突；通过 ref 绑定容器、nextTick 确保 DOM 更新、onInvalidate 防止重复滚动，配合 autoScrollEnabled 开关和精准 flush 时机控制。

用 watchEffect 自动滚动到页面底部，关键在于监听消息列表变化、判断当前是否处于底部、再触发 DOM 滚动操作，并配合清理机制防止异步冲突。

监听消息变化并触发滚动

当新消息加入 messages（一个 ref 数组）时，watchEffect 会自动重新执行。无需手动列出依赖项，只要在回调里读取了 messages.value.length 或遍历它，就会被追踪。

1. 确保容器元素已挂载，通过 ref 绑定 DOM 元素（如 messagesContainerRef）
2. 利用 nextTick() 等待 DOM 更新完成，再读取容器的滚动属性
3. 检查是否接近底部：container.scrollTop + container.clientHeight >= container.scrollHeight - 2

避免滚动被覆盖或错乱

连续快速发多条消息时，前一次的滚动可能还没执行完，后一次就已开始——这会导致滚动位置异常或卡顿。必须用 onInvalidate 清理未完成的操作。

1. 每次副作用执行前，onInvalidate 会自动调用上一次注册的清理函数
2. 不直接操作 scrollTop，而是把滚动逻辑包装进一个可取消的异步流程（例如用 Promise + 标记位，或简单地清除定时器）
3. 实际中常配合 setTimeout 或 requestAnimationFrame 做节流，但核心是保证“只生效最后一次”

支持用户手动关闭自动滚动

自动滚动不该干扰用户主动浏览历史消息。引入一个开关 autoScrollEnabled，在 watchEffect 开头判断其值，为 false 时直接返回，不执行后续逻辑。

1. 这个开关本身也是响应式数据，watchEffect 会自动追踪它
2. 用户点击“回到最新”按钮时，可临时设为 true 并手动滚动一次，不影响日常开关逻辑
3. 避免在滚动判断中混入非响应式变量（如普通布尔常量），否则无法触发重执行

DOM 操作时机要精准

watchEffect 默认在组件更新前（flush: 'pre'）运行，此时 DOM 还没刷新，直接读取 scrollHeight 会得到旧值。必须调整执行时机或等待更新完成。

1. 推荐方式：保留默认 flush，但在回调内显式调用 await nextTick()
2. 替代方式：配置 { flush: 'post' }，让回调在 DOM 更新后自动执行
3. 不要在 watchEffect 外部用 watch 或生命周期钩子同步处理滚动，会破坏响应式联动