starting at object with constructor ‘Watcher‘ | property ‘vm‘ -> object with constructor ‘Vu

在升级到Vue2.7后,作者发现使用computed获取store的userId时,遇到错误。问题在于computed返回的对象需通过.value获取实际值,类似Vue3的ref。错误信息提示涉及Vue的内部结构,如Watcher、VueComponent和EffectScope。解决方法是确保使用.value来访问ref或computed的值。当接口请求失败时,应首先检查参数和axios请求配置,因为错误可能在发送请求前就已经发生。

使用了Vue 2.7,之前我是用 getCurrentInstance 然后直接获取的store 下面的 userId,后面加了一个 computed 。我以为computed 是和之前一样的就没改接口请求,然后就报错,其实 computed 返回的参数和 ref 是一样的需要 .value。

心得总结:

当出现 Converting circular structure to JSON
–> starting at object with constructor ‘Watcher’
| property ‘vm’ -> object with constructor ‘VueComponent’
| property ‘_scope’ -> object with constructor ‘EffectScope’
| property ‘effects’ -> object with constructor ‘Array’
— index 0 closes the circle
有 vm 、_scope、effects、Watcher 发生错误可能就是 Vue2.7 和 Vue3 ref 之类的需要 .value才能拿到真实的值。

总结

当请求接口出生出错:
1: 先查看参数是否正确。
2: 查看 axios 的 request 的值。
3: 如果 network 没有请求接口 大部分应该在 请求参数的时候就错误了。

### 解决方案:处理 JavaScript 中的循环引用问题 在 JavaScript 中,当尝试使用 `JSON.stringify()` 将包含循环引用的对象转换为 JSON 字符串时,会抛出 `TypeError: Converting circular structure to JSON` 的错误。这是因为 JSON 格式不支持循环引用结构[^2]。 以下是一个完整的解决方案,通过自定义 `replacer` 函数来解决该问题: #### 自定义 `replacer` 函数 可以使用 `JSON.stringify()` 的第二个参数 `replacer` 来检测和替换循环引用。以下代码展示了如何实现这一功能: ```javascript function getCircularReplacer() { const seen = new WeakSet(); // 使用 WeakSet 来跟踪已访问的对象 return function (key, value) { if (typeof value === "object" && value !== null) { if (seen.has(value)) { return "[Circular]"; // 如果对象已经被访问过,则返回字符串"[Circular]" } seen.add(value); // 添加当前对象到集合中 } return value; // 返回值本身 }; } // 示例对象 const obj = {}; obj.circularRef = obj; // 转换为 JSON 字符串 const jsonString = JSON.stringify(obj, getCircularReplacer()); console.log(jsonString); // 输出: {"circularRef":"[Circular]"} ``` 上述代码中,`WeakSet` 用于存储已经访问过的对象。如果某个对象已经被访问过,则将其标记为 `[Circular]`,从而避免无限递归导致的错误[^2]。 #### 数据丢失问题 需要注意的是,这种处理方式会导致数据丢失。例如,循环引用的对象将被替换为字符串 `[Circular]`,这可能会使原始数据的部分信息不可恢复。因此,在实际应用中需要权衡是否可以接受这种数据丢失。 #### 替代方法 如果需要更复杂的处理逻辑,可以考虑以下替代方法: 1. **手动展开对象**:在序列化之前,手动展开或重构对象以消除循环引用。 2. **使用第三方库**:如 `flatted` 或 `circular-json` 等库,这些库专门设计用于处理循环引用对象的序列化和反序列化[^2]。 ### 示例:使用第三方库 `flatted` 以下是使用 `flatted` 库的示例代码: ```javascript // 安装 flatted 库:npm install flatted const flatted = require("flatted"); // 示例对象 const obj = {}; obj.circularRef = obj; // 使用 flatted 进行序列化 const jsonString = flatted.stringify(obj); console.log(jsonString); // 输出: [{"id":0,"circularRef":0}] // 反序列化 const restoredObj = flatted.parse(jsonString); console.log(restoredObj); // 输出: [Circular] ``` `flatted` 库能够自动处理循环引用,并且不会导致数据丢失[^3]。 ### 总结 通过自定义 `replacer` 函数或使用第三方库,可以有效解决 JavaScript 中将包含循环引用的对象转换为 JSON 时出现的 `TypeError` 问题。选择具体方法时需根据实际需求权衡数据丢失的风险。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值