VUE 变量更新页面无响应的问题

问题描述：

        最近在做项目的时候，遇到了一个问题：根据接口返回，给变量赋予了新的值，但是页面上却不刷新。

       我们都知道VUE是双向数据绑定的，变量赋值更新后，试图会同步做刷新，但是这里却一直刷不到新得值，非常的费解。

       赋值代码如下：

export default {
    name:'Detail',
    data() {
        return {
           arrayList:[
                {
                    "code": "600266",
                    "name": "XXX1",
                },{
                    "code": "600166",
                    "name": "XXX2",
                },{
                    "code": "600066",
                    " name": "XXX3",
                }
           ],     
        }
    }
    mounted(){
      this.arrayList.forEach((item) => {
           item.state = true
                        
      })
    }
    methods: {
        onClick(){
           this.arrayList[0].state = false
        }
    }
}

        上述代码中，mounted()中对arrayList数组的对象赋予了新的变量，页面可以正常显示，但是onClick()函数中对这一对象进行更新，页面就无响应了。

原因分析：

        官方文档定义：如果在实例创建之后添加新的属性到实例上，不会触发视图的更新。

        上述操作，是在arrayList数组创建之后，才给其添加的对象属性state，所以再给state更新值时，视图不会触发更新。

解决方式：

        官方定义：Vue不允许再已经创建的实例上动态添加新的根级响应式属性，然而可以使用Vue.set(object,key,value)或this.$set(object,key,value)方法将响应式属性添加到对象上。

       更新后的代码：

export default {
    name:'Detail',
    data() {
        return {
           arrayList:[
                {
                    "code": "600266",
                    "name": "XXX1",
                },{
                    "code": "600166",
                    "name": "XXX2",
                },{
                    "code": "600066",
                    " name": "XXX3",
                }
           ],     
        }
    }
    mounted(){
      this.arrayList.forEach((item) => {
           this.$set(item, 'state', true)
                        
      })
    }
    methods: {
        onClick(){
           this.arrayList[0].state = false
        }
    }
}

结果：onClick中修改了state的值后，试图同步刷新。