Vue修改数据页面不更新的问题解决

原理分析：

vue2是用过Object.defineProperty实现数据响应式

const item = {}
Object.defineProperty(obj, 'oldProperty', {
        get() {
            console.log(`get oldProperty:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                console.log(`set oldProperty:${newVal}`);
                val = newVal
            }
        }
    })
}

原因：组件初始化时，对data中的item进行递归遍历，对item的每一个属性进行劫持，添加set,get方法。我们后来新加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会视图更新。 

解决方法1:Vue.$set(官方推荐)

       Vue.set( target, propertyName/index, value )

      参数：
     target：要修改的对象或数组
     propertyName/index：属性或下标
     value：修改后的value值

     官方对这个API的解释就是使用这个api修改的数据会为其添加响应式getter和setter让其拥有数据响应的特性

this.$set(this.item, "newProperty", "新值");

解决方法2: Vue.$forceUpdate(手动强制更新视图)

this.item.newProperty = "新值" 
this.$forceUpdate();

     因为Vue修改数据是异步执行的,所以视图不会立即更新,会等到下一次dom更新循环结束后统一更新发生在这一次循环中修改的数据,然后同步视图更新,所以我们可以修改后自己手动强制更新视图

解决方法3:Object.assign(使用修改栈能触发视图更新的特性,借鉴React的写法)

this.item = Object.assign({},this.item,{newProperty:'新值'})

      我们都知道Object.assign能拷贝合成一个新对象,所以我们只需要将要修改的值合并成一个新对象然后赋值给data中的对象或数组,这样栈的指向被修改了.触发视图更新