解决vue修改数据绑定的视图不能动态更新的问题

在写项目的时候遇见一个问题，修改vue v-bind或v-model绑定的数据时，视图不能更新

这就感觉很无语了。。。。当时在写一个弹窗，弹窗的数据更新后不能更新视图，需要重新刷新才行。

这样的问题简直不能忍受。。。。 多方查找，才发现 vue文档里有这样一句话。

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

这句话的意思就是说，vue是基于响应式的，在vue中定义（绑定）的对象或数组，在新增或删除属性时，vue并不能检测到这些变化，但可以检测到属性的修改，（因为是基于getter/setter的）所以，只有data对象上存在的属性才可以是响应式的，就是可以被更新的！

幸运的是，vue提供了一些解决方法。

就是使用Vue.set(object, propertyName, value)（$set）方法设置新增的属性，使用this.$set()方法等价

例如：

data = {
    a: 1
}

// 为data对象新增一个b属性,值为2
Vue.set(data, 'b', 2)

其实方法参数已经写的很清楚了，第一个参数就是要新增的对象，第二个参数是新增的属性名，第三个参数是新增的属性值

对于数组更麻烦些，vue文档上写出：

Vue 不能检测以下数组的变动：

1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

也就是说在任何改动数组的值时，vue也不能检测到修改了！

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将在响应式系统内触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

 

删除属性使用this.$delete(object, propertyName)