watcheffect 不会自动死循环，但若在回调中直接修改其依赖的响应式数据（如 count.value++），将触发无限递归更新并报错；应避免副作用反向污染依赖源，推荐用 computed + ref 分离读写职责，或加守卫条件控制执行。

在 Vue 3 中，watchEffect 本身不会“自动”导致死循环，但一旦你在它的回调里直接修改它所依赖的响应式数据，就会触发新一轮执行——而新执行又会再次修改同一数据，形成无限递归更新，最终报错 “Maximum recursive updates exceeded”。关键不是 watchEffect 有问题，而是副作用写法破坏了响应式单向流动原则。

别在回调里改自己依赖的值

这是最常见、最典型的死循环源头。比如：

• 错误写法：watchEffect(() => { count.value++ }) → 每次执行都让 count 自增，一变就再触发，再变再触发……停不下来。
• 错误写法：watchEffect(() => { user.value.name = 'test' })（且你监听的就是 user.value.name） → 修改动作本身就在依赖链上，必然闭环。

用 computed + ref 分离读写职责

如果确实需要“根据 A 计算 B，且 B 可被手动更新”，不要让 watchEffect 承担写入任务。推荐组合方案：

• 用 computed 做纯派生计算（只读、无副作用）
• 用独立的 ref 存储可写状态，避免反向污染源数据

例如：想让 priceDouble 始终是 sourcePrice.value * 2，但允许用户临时覆盖它：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

const sourcePrice = ref(10)<br>const priceDouble = computed(() => sourcePrice.value * 2)<br>const syncedPrice = ref(priceDouble.value) // 后续只操作 syncedPrice

加条件判断或退出机制

若逻辑必须在 watchEffect 中修改响应式数据，务必加入明确的守卫条件，防止无休止触发：

• 检查新旧值是否真正不同（避免无效赋值）
• 设置计数器或标志位，限制最大执行次数
• 仅在特定状态（如非 loading、非初始态）下才执行写入

示例：

watchEffect(() => {<br>  if (formState.value === 'ready' && !isSubmitting.value) {<br>    formData.value = generateDefaultData()<br>  }<br>})

警惕模板中隐式调用和副作用函数

虽然不属于 watchEffect 本身，但容易混淆：如果在模板里写了 {{ mutateAndReturn() }}，而这个函数内部修改了响应式数据，同样会引发渲染阶段的循环更新。这类问题常被误认为是 watchEffect 导致，实际根源在模板副作用。

• 模板中只做纯展示，不执行修改操作
• 把有副作用的逻辑移到事件或 watch/watchEffect 中，并确保受控

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！