循环引用导致响应式系统无限递归，应切断不必要的响应式追踪或序列化路径：用store.$state或$rawState安全序列化，markRaw标记不可响应对象，shallowReactive控制代理深度，拆分store边界，调试时用Devtools定位。
响应式状态中出现循环引用，通常是因为对象之间相互持有引用（比如父子组件双向绑定、嵌套 store 实例互相依赖），导致 Vue 的响应式系统在深度遍历或序列化时陷入无限递归，最终触发栈溢出或 TypeError: Converting circular structure to JSON 报错。核心解法不是“禁止循环”，而是切断不必要的响应式追踪或序列化路径。
识别循环引用的常见源头
不是所有循环都危险，但以下场景极易触发问题：
-
Store 实例间直接赋值：例如
userStore.profile = profileStore，而profileStore又持有了userStore； -
响应式对象嵌套自身：如
const node = reactive({ id: 1 }); node.parent = node;； -
使用
toRaw()或markRaw()不当：本该跳过响应式的第三方类实例（如 Map、自定义 Model）被意外包裹进 reactive； -
调试时调用
JSON.stringify(store)：这是最常见报错现场，但本质是序列化行为暴露了底层循环结构。
避免 Store 序列化报错的实操方案
Vue 3 的 store（尤其 Pinia）默认是响应式对象，直接 JSON 序列化会失败。正确做法是按需提取纯数据：
- 用
store.$state获取当前状态快照（非响应式），再JSON.stringify(store.$state)—— 安全且轻量； - 对复杂嵌套结构，优先使用
store.$rawState（Pinia v2.1+）获取原始对象，它不经过 proxy 包装； - 若需导出含 computed 的完整视图，手动构造扁平对象：
{ ...store, count: store.count }，避免展开整个响应式代理； - 开发阶段加保护：封装一个安全序列化函数，内部用
try/catch+replacer过滤循环键（例如跳过以$开头的属性或函数）。
主动切断响应式循环的关键操作
当必须保留对象关系但又不能让 Vue 追踪时，用语义明确的“脱敏”手段：
-
用
markRaw()标记不可响应对象：如const apiClient = markRaw(new ApiClient())，再将其挂载到 store 上（store.client = apiClient），这样 Vue 不会尝试递归代理它； -
用
shallowRef()或shallowReactive()替代深层响应式，只代理第一层，子属性变更不会触发更新（适合大型树形结构）； -
拆分状态边界：把原本耦合在同一个 store 中的相互引用逻辑，拆成两个独立 store，通过事件（
store.$onAction）或回调通信，而非直接持有对方实例； - 在
computed或watch中访问循环对象时，先用toRaw()解包，避免 proxy 层级嵌套加深。
排查与验证技巧
快速定位问题位置：
- 在浏览器控制台执行
console.log(store)，展开对象，观察是否出现<circular reference>提示； - 用
JSON.stringify(store, (key, val) => key === '$' ? undefined : val)简单测试是否仍报错，缩小问题范围； - 在 store 的
setup()或defineStore()中逐行注释初始化逻辑，配合console.trace()查看哪一行首次引入循环； - 借助 Vue Devtools：切换到 “Stores” 面板，查看 store 结构树，留意带灰色锁图标或异常展开项。
不复杂但容易忽略。关键是在设计阶段就明确“哪些该响应、哪些只作容器”，而不是等报错后再层层解套。
