避免渲染死循环需切断响应式依赖闭环：模板只读取不修改数据；计算属性须为纯函数；v-for 用稳定 key；条件渲染避免动态表达式。
避免渲染死循环的关键是切断响应式依赖的意外闭环，同时控制模板中计算逻辑的触发时机。Vue 模板本身不会主动引发死循环，但不当写法会让更新逻辑反复触发自身，比如在计算属性或 watcher 中修改了被依赖的数据源。
别在模板里调用会改变响应式数据的方法
模板中绑定的方法如果内部修改了当前组件的响应式状态（如 ref、reactive 或 props），就可能造成“更新 → 触发 render → 再次调用方法 → 再次更新”的闭环。
- ❌ 错误示例：
{{ handleClick() }}，而handleClick里写了count.value++ - ✅ 正确做法：事件处理用
@click，模板内只做读取；所有写操作收口到事件回调或 computed 的 setter 中
计算属性要纯函数，不带副作用
computed 的 getter 必须是无副作用的纯函数——它只能读取响应式数据，不能修改任何响应式变量，也不能发起请求、写 localStorage、调用会影响状态的函数。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- ❌ 错误写法：
computed(() => { api.fetch(); return data.value }) - ✅ 正确写法：把异步逻辑移到
onMounted或事件中，computed 只负责格式化已有数据，例如formattedList: computed(() => list.value.map(x => ({...x, label: x.name.toUpperCase()})))
v-for 必须配唯一 key，且 key 不要动态生成
key 不稳定会导致 Vue 无法复用节点，频繁销毁重建，间接放大重渲染压力，极端情况下配合 watch 或 effect 可能诱发异常更新链。
- ❌ 避免用
:key="index"或:key="Math.random()" - ✅ 使用业务唯一字段，如
:key="item.id"；若数据无 id，应提前补全（比如 map 时加id: Symbol()） - ⚠️ 特别注意：不要在 v-for 内部用
v-model绑定一个被同一循环依赖的数组项，例如v-model="items[index].name"+@input="updateItem(index)"且updateItem又触发了 items 重新赋值
条件渲染慎用复杂表达式
v-if / v-show 后面的表达式如果包含函数调用或深层访问，每次 render 都执行，不仅慢，还可能因返回值不稳定（如每次返回新对象）导致 Vue 误判为“状态变化”，进而重复 patch。
- ❌
v-if="getFilters().length > 0"（getFilters每次都新建数组） - ✅ 提前用 computed 封装：
hasFilters: computed(() => filters.value.length > 0)，模板里写v-if="hasFilters" - ? 补充：对静态判断，直接用
v-once，比如版权信息、固定提示语
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
