在项目中遇到的一些关于vue的坑

2017-12-18 11:40:07来源:CSDN作者:Revan_g人点击

分享

在项目中遇到的关于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了。

该系列的坑还没说完,待更新…..

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台