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 —— 它不处理副作用。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- ❌ 错误示例：
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）可打断同步循环，但只是掩耳盗铃，治标不治本
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
