Vue计算属性死循环的核心原因是getter中修改其依赖的响应式数据，导致无限递归求值；应恪守“只读不写”原则，将修改逻辑移至methods、watch或事件回调中。

Vue 计算属性 computed 报死循环，核心原因是：在 getter 中修改了它自己依赖的响应式数据，触发重新求值 → 再次修改 → 无限递归。这不是 bug，而是响应式系统正常工作的表现。关键要守住“只读不写”这条线。

别在 computed 里改响应式数据

计算属性本质是派生值，不是执行逻辑的地方。一旦在 getter 中对 ref、reactive 或 data 属性赋值，就会立刻形成闭环。

• ❌ 错误写法：computed(() => { count.value++; return count.value * 2 })
• ✅ 正确做法：把修改动作移到 methods、事件回调或 watch 中；computed 只负责返回计算结果
• 特别注意嵌套对象：像 user.profile.name = 'new' 这类操作，哪怕只是解构后又赋回，也可能意外触发 setter 链

分清 computed 和 watch 的分工

当需求是“某个值变了，我要发请求/更新另一个状态”，别塞进 computed —— 它不处理副作用。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• ❌ 错误示例：computed(() => { api.fetch(); return data.value })，每次依赖变化都重发请求
• ✅ 推荐方案：用 watch 监听源数据，加条件判断（如 if (newVal !== oldVal)），再执行副作用；需要缓存结果时，额外配一个 ref 存起来
• 如果依赖多个响应式源且逻辑复杂，考虑 watchEffect + 手动防重

模板和 updated 钩子里也容易踩坑

死循环不只发生在 computed，任何在响应式更新流中修改数据的位置都可能触发。

立即学习“前端免费学习笔记（深入）”；

• 模板中调方法：比如 {{ doSomething() }} 里有 list.push()，每次渲染都改数据，必然循环
• updated 钩子中改响应式对象：如 this.items = [...this.items]，地址变了 → 触发新更新 → 又进 updated
• 调试建议：在疑似位置加 console.count('triggered')，看是否快速飙到上百次；配合 Vue Devtools 的 “Reactivity” 面板查依赖图，确认有没有反向引用

快速定位和修复小技巧

遇到 Maximum recursive updates exceeded 报错，按这几步排查最有效：

• 检查所有 computed 的 getter，逐行确认有没有赋值语句
• 搜项目里的 watch(.*?,.*?{)，看回调里是否直接改了监听目标本身
• 临时注释掉疑似副作用代码，观察报错是否消失
• 把高频修改的操作改成异步（如 nextTick 或 setTimeout）可打断同步循环，但只是掩耳盗铃，治标不治本