近期两天遇到一个这样的bug
现象：从后台返回的数据中是一个map，里面包含一个array，value:[1,2],但是我前端老是取不到这个value，为[]，于是开启了一系列的寻找方案
我在回调函数里面打印出来的就是[]，于是我很奇怪，为什么network里面返回的结果明明该数组的长度为2，但是我打印出来确实0
怀疑对象1：箭头函数问题
于是我开启了一系列的修改，首选换成了普通函数，很惊奇的发现，打印出来的response确实是2，很开心，觉得就是箭头函数问题导致的，于是下面的this指向问题又来了，普通函数的this指向是window啊，蓝瘦，于是开启了一系列的改变this指向的探索，apply，call，bind，以及this上下文的赋值全部都用到了，发现，值咋又变成0了，于是放弃了该怀疑对象
怀疑对象2：异步调用函数问题
觉着是走了异步函数，导致页面渲染了之后值没有及时更新，于是，nextTick，setTimeout全部都用上了，辛苦探索了很长时间，发现，值还是为0，于是放弃了该怀疑对象
怀疑对象3：对象中包含的数组被替换
该解决方案就是，用一个新的对象，继承返回过来的对象，于是，打印出来的结果就是原对象是2有值，新对象是0,没值，于是觉得该方案好像成功的样子，但是后续这个对象只要被使用，该对象就没值了，只要没被使用，该对象就有值，奇怪的现象让我又放弃了这个怀疑对象
怀疑对象4：vue生命周期的先后顺序
created里面执行的该接口函数，于是又放到了mounted里面，想想都不符合逻辑，但是还是傻乎乎地尝试了
后来发现控制台console.log打印出来的只是结果，我们需要用JSON.stringfy(),打印出来的就是当前值了，结果发现是在后续的方法中处理了返回的map，于是source打断点，发现该方法结束之后，这个value还是有两个值的，那就只有在这个方法之后做了什么神仙操作了。。。。。。
最终原因是因为我监听了值summary，当该summary值发生变化的时候，清空所有的选项值，我只想着select选择的时候该summary值变化，清空所有选项，但是我没想到，当后端返回接口里面的值summary需要赋值给该summary，导致自动清空啊~~~~~~想哭
网友评论