Vue 3 响应式系统不因普通循环引用直接崩溃，但读取又同步修改该结构会触发无限递归或栈溢出；需识别危险路径、用 markRaw/shallowRef/toRaw 隔离响应式追踪，并借助 $state/$rawState 安全序列化及 Devtools 定位死循环。
Vue 3 响应式系统本身不会因普通循环引用（如 obj.parent = obj）直接崩溃，但一旦在副作用（effect、computed、watch 或模板渲染）中**读取又同步修改**该结构，就极易触发无限递归更新或栈溢出。核心不是“删掉循环”，而是让循环在关键路径上失效。
识别并隔离危险的循环路径
真正引发死循环的，往往不是数据结构本身，而是响应式逻辑与循环结构的错误交叠：
- 计算属性 getter 中修改了它自己依赖的响应式字段（例如
computed(() => { count.value++; return count.value })） - watch 回调里直接改了被监听的源值（例如
watch(count, () => count.value++)） - 模板中调用会变更响应式数据的方法（例如
{{ mutateAndReturn() }}） - 跨 store 直接赋值形成双向持有（如
userStore.profile = profileStore且profileStore.user = userStore），并在 computed 中深度访问
用语义化工具切断响应式追踪
当必须保留对象关系（如树节点父子引用、API 客户端挂载），但又不希望 Vue 递归代理时，优先使用明确标记：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
-
markRaw()：用于第三方类实例、DOM 元素、Map/Set 等——store.client = markRaw(new ApiClient())，之后 Vue 完全跳过它 -
shallowRef()或shallowReactive()：只代理第一层，子属性变更不触发更新——适合大型嵌套结构（如富文本编辑器状态树） -
toRaw()：在computed或watch内部临时解包，避免 proxy 嵌套加深（例如const raw = toRaw(node); return raw.parent?.id）
安全序列化与调试避坑
报错常出现在 JSON.stringify(store)，但这只是暴露问题的表象。正确做法是绕过响应式代理获取纯数据：
- 用
store.$state获取当前非响应式状态快照，再序列化：JSON.stringify(store.$state) - Pinia v2.1+ 可用
store.$rawState，它返回未经proxy包装的原始对象，更轻量可靠 - 开发期加一层保护：封装安全序列化函数，内部用
try/catch+ 自定义replacer过滤函数、$ 开头属性等可枚举循环键
利用 Vue 内置熔断机制辅助定位
Vue 调度器默认限制单次更新周期内副作用执行不超过 100 次（MAX_UPDATE_COUNT）。出现 Maximum recursive updates exceeded 报错时，说明已进入死循环：
- 检查控制台堆栈，看是否反复出现在某个
computed或watch内部 - 打开 Vue Devtools，在“Dependencies”面板中观察哪些属性反复触发同一 effect
- 临时注释疑似逻辑，用
console.log插入断点，确认是“读→改→再读”的闭环
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
