watchSyncEffect() 同步执行的副作用

最后更新：2026-10-22

watchSyncEffect() 等价于 watchEffect 加 flush: 'sync'：依赖一变立即同步执行，不做批处理。

📝 语法

watchSyncEffect(() => {
  console.log('立即执行', count.value)
})

effect	副作用函数；选项与 watchEffect 相同（不含 flush）

返回值：停止侦听的函数 stop()

修改下面的代码，在预览区实时查看效果：

输出：

一次点击加 2 会记录两条（如「2 2」）；若用默认 flush，只会记录一次最终值。

⚠️ 注意 同步执行会跳过批处理，高频变化场景性能风险明显——仅在必须精确捕获每次变化时使用。

ℹ️ 说明 典型用途：调试追踪、需要严格按顺序记录每次变化的场景。

💡 提示 能用 watch（默认 pre）+ nextTick 解决的就不要用 sync。

更多案例即将上线。

Q sync 模式和默认模式差在哪？

A 默认把同一轮的多处修改合并成一次执行；sync 每改一处立即执行一次。

Q 会更容易引发性能问题吗？

A 是，每次赋值都同步跑副作用，循环里修改会线性放大开销。

Q 能拿到新旧值吗？

A 不能，它是 watchEffect 家族；要新旧值用 watch 配 flush: 'sync'。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。