Vue 响应式侦听如何在 watchEffect 中同步数据修改后的历史记录栈压入

watchEffect 中实现历史记录的关键是利用其自动追踪依赖和立即执行特性，结合 ref 缓存上一状态，在每次变更时先压栈再更新缓存；若需新旧值对比则应改用 watch。

在 watchEffect 中实现“数据修改后自动压入历史记录栈”，关键在于：利用其自动追踪依赖 + 立即执行的特性，结合副作用清理与状态快照逻辑，在每次响应式数据变更时，将变更前的状态（或变更后的快照）存入栈中。这不是直接“同步压栈”，而是通过副作用函数的执行时机和可控快照策略来达成历史回溯能力。

明确历史栈的压入时机与内容

历史记录的本质是“状态快照”。watchEffect 默认在依赖变化后、DOM 更新前执行（flush: 'pre'），此时你拿到的是新值，但旧值已不可直接访问（watchEffect 不提供 oldVal 参数）。因此常见做法是：

1. 在副作用函数执行前，手动保存上一次的状态（例如用 ref 缓存）
2. 或在每次更新后，将当前完整状态深拷贝一份存入栈（适合轻量、结构稳定的数据）
3. 避免在 watchEffect 内部直接操作 DOM 后再压栈——那属于副作用链，应解耦

用 ref 缓存上一状态，变更时压栈

这是最清晰、低开销的方式。借助一个 previousState ref 记录上次快照，每次 watchEffect 执行时先压栈再更新缓存：

import { ref, watchEffect, shallowRef } from 'vue'const state = ref({ count: 0, name: 'Alice' })const historyStack = ref([])const previousState = shallowRef(null)watchEffect(() => {// ✅ 压入「上一次」状态（即变更前的状态）if (previousState.value) {historyStack.value.push(JSON.parse(JSON.stringify(previousState.value)))}// ✅ 更新缓存为当前最新状态（供下次使用）previousState.value = JSON.parse(JSON.stringify(state.value))})

注意：shallowRef 防止深度响应式干扰；JSON.parse(JSON.stringify()) 是简易深拷贝（仅适用于可序列化数据）。若含函数、Map、Date 等，需用 structuredClone 或专用克隆库。

配合 onInvalidate 清理冗余快照（防内存泄漏）

当监听源频繁变化（如输入框连续打字），可能产生大量中间快照。可在 watchEffect 中使用 onInvalidate 提前丢弃未确认的历史：

watchEffect((onInvalidate) => {let isPending = trueonInvalidate(() => {isPending = false})// 仅当本次执行未被取消时才压栈if (isPending && previousState.value) {historyStack.value.push(previousState.value)}previousState.value = { ...state.value }})

这样能避免因异步操作（如防抖请求）导致的无效快照堆积。

需要旧值对比？优先考虑 watch

如果业务强依赖「新旧值对比」（比如只在 name 改变且 count > 10 时才记录），watchEffect 并不适用——它没有 (newVal, oldVal) 回调。此时应改用 watch 并开启 immediate: true 模拟首次压栈：

watch(() => ({ ...state.value }),(newVal, oldVal) => {if (oldVal) historyStack.value.push(oldVal)},{ deep: true, immediate: true })

这种写法更语义明确，也便于调试和条件过滤。