JSON序列化遇到循环引用的问题

记录一个在工作中实际遇到的问题。

需求描述:

有许多要序列化的对象,对象中有个字段引用了其他对象或者被其他对象引用了。在序列化之前已经先通过装饰器进行标记,将那个字段给去除不参与序列化。

结果描述:

进行

1
JSON.stringify(obj);

提示

1
"TypeError: Converting circular structure to JSON";

思考

经过搜索,此错误是由于循环引用产生的,但是原因何在?

里面应该已经不存在循环引用的内容了,因为已经通过装饰器的去除了,并且再检查了一遍装饰器是正常工作的。

解决

打开控制台进行调试,将断点设置在未去除字段之前,内容看图:

调试1

多出了一个莫名其妙的 “__ob__“ 的字段。再往深处查原来的对象,内容看图:
调试2

“__ob__“存在在这个对象里面,还是个Observer,

经过思考和搜索,确定了这个原因是Vue自己给我加进去的,想起之前Vue的data里面的对象都会被强行插入set和get方法。原因就大致懂了,因为这边的对象通过Vue的bus进行传输过,应该是在这个过程中被插入的。

知道问题所在,解决就简单了,将这个字段去除后再进行序列化就没问题了。

这个坑虽然没有多大难度,只要深入调试一下必定可以发现的这个字段,主要是思考为什么会出现这个字段才是比较重要的。

-------------本文结束感谢您的阅读-------------