在项目中遇到的关于vue v-for 的坑
1. 关于v-for,动态生成DOM节点的报错问题 :
在座的小伙伴估计都用过 ajax 或者 axios , 获取数据展示在页面上,这种做法是好的也是提倡的,但是呢,不知道在座的小伙伴们有没有遇到这种情况,当重复刷新页面或者多次发生请求获取数据的时候,就会报错,(例如下图)
一旦发生这种错误,直接导致页面出现假死状态,当初的我就像现在你遇到这问题的时候一样,满脸崩溃!!!
首先我们要先弄明白到底是什么原因造成的: javascript 本身值传递的特点导致的。v-for最开始是每个item都有自己的key,但是对象,数组是按引用传递的,就是内存地址是不变的,所以因为你数据改变,但是key不变,所以在内存里就会有相同的key,也就是说在同一块内存里有相同的key,而导致发生了冲突!
既然知道问题出现在,不能在同一块内存中存在两个相同的key,那我们就另开辟一个内存装着,问题是不是就迎刃而解了….
解决方案 :
(1) 如果存放数据的是一个数组,那么在通过请求获取的数据时,先把存放是这个数组初始化 —> this.data = [] ,最后再赋值。 这样一来就不会与之前的地址冲突了
(2) 如果存放数据的是对象,同样的原理,在赋值前,
先通过 JSON.parse(JSON.stringify(data))
,进行深拷贝,就OK了。
该系列的坑还没说完,待更新…..