计算属性getter必须是纯函数，只读依赖、只返回值，禁止修改响应式数据，否则引发死循环或错误；修改逻辑应移至methods、watch或watchEffect中。
计算属性只负责“算出结果”，不能顺手改数据。一旦在 computed 的 getter 里修改 ref、reactive 或其嵌套属性，就会触发响应式系统重新求值，形成死循环或报 Unexpected side effect 错误。
严格遵守只读原则
计算属性的 getter 函数必须是纯函数：只读取依赖项，只返回新值，不改变任何已有响应式状态。
- ✅ 正确写法：读
count.value，返回count.value * 2 - ❌ 错误写法：在 getter 里写
count.value++、list.push(item)、user.name = 'new' - 嵌套对象要小心：即使只是解构后又赋回（如
const { name } = user; user.name = name），只要发生在 computed 内，也可能触发 setter 并引发循环
把修改逻辑移到合适的地方
需要更新状态？别塞进 computed，按场景选更合适的工具：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 用户交互触发的修改 → 放在
methods或事件回调中（如@click="updateCount"） - 某个响应式数据变化后要同步更新另一个状态 → 用
watch，例如监听searchText变化后调用fetchData或设置filteredList - 需要缓存计算结果 + 副作用 → 用
watchEffect配合一个额外的ref存结果（比如const cachedResult = ref(null)）
警惕隐式修改和边界操作
有些操作看似只是读，实则会间接触发写行为：
立即学习“前端免费学习笔记（深入）”；
- 避免在 computed 中调用有副作用的函数，比如
api.get()、localStorage.setItem()、setTimeout - 不要对 reactive 对象做
Object.assign、JSON.parse(JSON.stringify())后再赋值回去，这类操作容易绕过响应式追踪或意外触发 setter - 访问深层属性时用可选链（如
user?.profile?.age），但别紧接着给它赋值
调试与验证技巧
遇到报错或疑似循环，快速确认问题位置：
- 在 computed 的 getter 开头加
console.trace('xxx computed')，看控制台是否连续打印同一行 - 打开 Vue Devtools 的 “Reactivity” 面板，检查该 computed 的依赖图 —— 如果它自己出现在依赖列表里，说明存在反向依赖
- 临时注释掉 getter 中所有赋值语句，观察错误是否消失；再逐行放开，定位具体哪一行触发了问题
