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

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

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

​