v-for循环同一个自定义组件，只有最后一个有数据

这个问题时不时的冒出来困扰我几天时间，网上也搜了很久，一直没有解决，我在想会不会是vue本身的问题，但根据观察应该就是自定义组件才会出现该问题，突然有一天终于解决了。然后我回忆心路历程，终于知道发生了什么，不知道有没有跟我一样在学习VUE时出现类似心路历程的呢？

1.问题诱因：

        箭头函数this就是"该函数所在的作用域指向的对象"而不是vue页面的对象。所以为了解决这个问题，我们一般会这样写：

methods:{
    fun(){
        let that = this
        this.arrayList.forEach((item,index)=>{
            if(item.name==that.curName){
                ......
            }
        })
    }
}

BUT，当函数多了以后，就变成这样了：

methods:{
    fun(){
        let that = this
        this.arrayList.forEach((item,index)=>{
            if(item.name==that.curName){
                ......
            }
        })
    }
    fun1(){
        let that = this
        this.arrayList.forEach((item,index)=>{
            if(item.name==that.curName){
                ......
            }
        })
    }
    fun2(){
        let that = this
        this.arrayList.forEach((item,index)=>{
            if(item.name==that.curName){
                ......
            }
        })
    }
    fun3(){
        let that = this
        this.arrayList.forEach((item,index)=>{
            if(item.name==that.curName){
                ......
            }
        })
    }
}

每个方法开头都要写一句：let that = this   烦不烦？难受不难受？强迫症患者就开始想办法了：“能不能定义成全局变量，只在create中写一句that=this，然后就可以在每个方法中直接使用that”，于是：

完美，perfect ！！！代码看着清爽多了，于是每个VUE页面都这样写省事了！！！

2.编写自定义组件

        当需要写一个组件时，我们依然仿照上面的方式写：

(1)自定义组件：labelShow.vue

（2）父组件调用：parent.vue

页面显示：  性别：未知    显示正常Good

3.问题出现：

当父组件用v-for循环显示子组件时：

显示效果：

                性别：     

                学历：博士

性别的内容总是出不来。然后把userInfo的数组元素换个位置，把学历放上边，把性别放下面

显示效果：

                学历：

                性别：男

至此，你已经成功的跳进沟里去了，

4.原因分析

        通过调整顺序发现只有循环的最后一个组件显示正常，可以感觉出来是for循环过程中数据没有隔离，造成多个组件使用了同一个（最后一个）数据。那如何进行数据隔离呢，第一想到的就是“深拷贝”，BUT，在你使用过深拷贝后，依然无法解决问题。所以思路不应该是“如何进行数据隔离”，而是应该考虑“为什么出现了数据复用”，最后发现就是那个万恶的   let that=null，因为that被定义在了VUE对象外面，而在VUE里面又对他赋了值，就这样，当循环时最后一个vue组件就会对that赋值，也就是说，多个自定义组件使用了同一个 that。

5.解决问题

自定义组件时，老老实实的把  let that = this 写在每个有箭头函数的方法里。

注意：代码没测试可能有错误，但在项目中已经验证过了。