修改数据页面不更新的原因和解决方案

前言：我们在使用Vue框架进行项目开发时会遇到碰到数据更新，但是视图并未改变的情况，那么是什么原因导致视图不更新的，下面就来分析视图不更新的原因以及解决方案。

直接添加属性的问题

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

解决方案

方案1：Vue.$set(官方推荐)
官方对这个API的解释就是使用这个api修改的数据会为其添加响应式getter和setter让其拥有数据响应的特性
Vue.set( target, propertyName/index, value )
参数：

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

原理：这里无非再次调用defineReactive方法，实现新增属性的响应式

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

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

方案3:Object.assign(使用修改栈能触发视图更新的特性,借鉴React的写法)
我们都知道Object.assign能拷贝合成一个新对象,所以我们只需要将要修改的值合并成一个新对象然后赋值给data中的对象或数组,这样栈的指向被修改了.触发视图更新

 let obj = {
    a: 123,
  };
  
  this.obj=Object.assign({},{
    ...this.obj,
    b:456
  });

方案4:对于数组还可以使用splice方法(Vue对于数组的操作能识别变化的api包括splice):
this.arr.splice(你要修改的元素索引位置,1,修改后的值) 这是修改操作

示例:修改a

this.obj.splice(0, 1, {
 a: 456
});

this.arr.splice(你要添加到哪个元素的前面就写那个元素的索引+1,0,要添加的值) 这是添加操作

示例:添加b

this.obj.splice(1, 0, {
 b: 456
});

this.arr.splice(你要删除的元素索引,1) 这是删除操作

示例:删除a

this.obj.splice(0, 1);

总结

• 如果为对象添加少量的新属性，可以直接采用Vue.set()（官方推荐）

• 如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象

• 如果你需要进行强制刷新时，可采取$forceUpdate() (不建议)