vue响应式对象能json.stringify不报错，是因为__ob__等内部属性设为不可枚举（enumerable: false），被自动跳过；但显式可枚举循环引用（如user.parent = user）仍会报错。
Vue 响应式系统本身不禁止循环引用，而是通过底层设计规避其引发的常见问题——比如序列化报错、无限递归追踪或栈溢出。关键不在“消除循环”，而在“控制响应式穿透范围”和“隔离序列化路径”。
为什么 Vue 的响应式对象能 JSON.stringify 不报错？
Vue 2 和 Vue 3 都将响应式标记（如 __ob__ 或 $$state 等内部属性）设为 不可枚举（enumerable: false）。这意味着：
-
JSON.stringify()默认只遍历可枚举属性，自动跳过__ob__、$$raw等代理元信息； - 即使对象存在
a.b = a这类显式循环，只要没有其他可枚举循环字段，就能成功序列化； - 但这只是“表面安全”——若你在响应式对象上手动加了可枚举的循环引用（如
user.parent = user），仍会触发Converting circular structure to JSON报错。
响应式追踪中如何防止无限递归？
Vue 3 使用 WeakMap 存储响应式代理与原始对象的映射关系，并在 proxy 的 get 拦截中做闭环检测：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 首次访问嵌套属性时，会递归调用
reactive创建子代理； - 若当前目标已在 WeakMap 缓存中（即已被代理过），直接返回已有 proxy，避免重复包装；
- 对自引用结构（如
node.parent = node），代理层仅建立一次，后续访问不触发新响应式转换，从而阻断递归链。
开发中真正要防的不是“循环”，而是“不该响应的循环”
多数报错源于误把本不该进响应式的对象纳入 reactive，例如：
- 第三方类实例（
new Map()、moment()、自定义 Model）被直接赋值给响应式对象； - Store 实例互相持有（
userStore.profileStore = profileStore）； - 调试时直接
console.log(JSON.stringify(store))暴露深层循环。
应对方式明确且轻量：
- 用
markRaw()标记无需响应的对象，再挂到 store 上； - 跨 store 通信改用事件（
store.$onAction）或回调，而非直接赋值引用； - 序列化状态统一走
store.$state（非响应式快照）或store.$rawState（原始数据）； - 复杂结构导出时手动构造纯对象，避开展开整个 proxy。
深拷贝响应式数据时的循环处理
不要用 JSON.parse(JSON.stringify())——它丢函数、丢 Symbol、丢 Date，还爆循环。
- 现代环境优先用
structuredClone(toRaw(obj))：支持循环引用 + 全类型保留； - 兼容老环境需手写递归拷贝：必须配合
WeakMap缓存已拷贝对象，避免重复进入同一节点； - 拷贝前先
toRaw()解包，否则会尝试拷贝 proxy 层，极易触发死循环或内存暴涨。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
