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` 为 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中，并确保受控
