vue父组件通过v-for循环多次调用同一个子组件，改变被循环数组个数，各子组件显示数据混乱

场景是这样的，动态添加子组件，在父组件中循环显示，可以随时增加活删除子组件

父组件大概是这样，templateList用来控制模版个数，childData是传入子组件中的数据，添加模版时分别往templateList和childData中push数据，deleteTem()方法是删除模版的，用splice

// 删除模版
deleteTem(index) {
    this.templateList.splice(index, 1);
    if(this.childData.length > 0){
        this.childData.splice(index, 1);
    }
},

删除后面的模版不会有问题，但是删除前面或者中间的就会影响被删除组件后面所有的子组件的内容显示，比如有三个组件，删除第一个之后应该显示第二和第三个，组件确实只有两个，但是内容却是第一个和第二个的内容，打印templateList和childData中数据也是合适的，也是找了很久才找见问题，所以就记录一下。

这里主要问题在于v-for后面的key，这里key的值是数组的下标，将:key="index"改成具有唯一性标示的就行，这里是用了随机数:key="index+'-'+Math.random()"。

最开始写vue，由于编辑器在v-for之后不写key就会报红线，所以形成的习惯就是每次把index赋给key，一直也没出现过啥问题（主要是之前也没操作过v-for循环展示的内容），后来也去专门了解了一下key作用，大部分比较官方的说法都是唯一标示和高效更新虚拟DOM，唯一性不用说，这个高效更新虚拟DOM，我个人的理解就是在v-for首次循环显示时给每个子元素加一个唯一的key，在页面刷新或者DOM改变时就会通过之前的key快速将其渲染出来，反正说是这么说，理解也是这么理解，但是从来没有深切感受到。

在这里，删除了第一个，应该就不存在key="0" 的部分了，其实却不然，循环的数组改变了，下标0依然存在，key="0"也依然存在，会把之前key="0"的内容直接渲染出来，所以才会出现删除第一个以后，第一个的内容依然能显示。

关于key的作用，我觉得这篇文章讲得很明白，这里就不再赘述了，需要的可以去了解一下https://blog.csdn.net/JSN___/article/details/96018571