Vue中v-model数据不及时更新问题解决方案

Vue受到 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测数组和对象的变化。由于 Vue会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue及时响应数据的变化。 下面我们来看看Vue中的数据变化的不同

// 下面的vm.a 是响应的
var vm = new Vue({
  data:{
      obj:{ a : 1 }
  }
})
// 下面的vm.b 是非响应的
vm.b = 2

关于Vue使用v-model绑定的数据不及时更新的解决方案一共有三种：

第一种解决方案：使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：

Vue.set(vm.Object, 'b', 2)

第二种解决方案：使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.Object,'b',2)

第三种解决方案：使用Object.assign({},this.obj)重新赋值

this.obj.b = 2;
this.obj = Object.assign({},this.obj)
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

前两种方案都是应用了Vue内置的set方法去触发对象数据的检测，第三种方式使用的Vue的特性，对根节点下的数据变更的自动检测。

如果一次只需要修改或更新一个对象的修改数据时可以采用第一或第二种方案。 如果是一次需要为已有的对象赋值多个新property时，只能采用第三种解决方案。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。