vue中数据改变 视图不更新的原因以及解决方法（强制更新视图）

我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下：

1.数组数据改变时，使用某些方法操作数组，数据变了，但是视图并没改变。（页面没有监测到数据改变）

解决办法：

使用下面这些方法操作数组，其数据会被vue监测

push()、pop()、shift()、unshift()、splice()、sort()、reverse()可被vue监测到。

替换数组：

例如filter()、concat()和slice(),这些不会改变原始数组，但是会返回一个新数组。可以用新数组替代原数组。你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

注意：

vue不能监测到一下变动的数组

（1）当利用索引直接设置一个项时，vm.items[indexOfItem] = newValue

（2）当修改数组长度是，vm.items.length = newLength

为了解决利用索引改值的问题，可以用下面两种方法：

vm.items.splice(indexOfItem, 1 , newValue)

this.$set(vm.items, , newValue)

为了解决修改数组长度问题，可以用splice：

vm.items.splice（newLength）

2.对象属性的添加或删除

由于JavaScript的限制，vue不能监测到对象属性的添加或者删除

解决办法;

动态添加一个属性

this.$set(obj, key, newValue)

vue.set(object, key, newValue)

动态添加多个属性

有时候我们需要添加多个对象属性，就需要用两个对象的属性创建一个新对象。

下面这种写法不合理

Object.assign(newObj, {name: '小太阳',age: 18})

应该是下面这种写法：

let newObj = Object.assign({}, newObj , {name: '小太阳',age: 18})

原因：

对象是引用类型，直接改变对象的某属性但是指向地址没变，vue不一定能监控到，所以当我们新建一个对象，就直接改变了他的指向地址。

3.vue自带的强制更新

this.$forceUpdate()，强制视图更新

4.在data中的属性依赖某个外部变量，但是外部变量改变的情况下data中的值并没有变化。

解决：watch监控