vue -- 对象数据变化

当我们往data里面追加一个没有或者删除一个数据时，视图并不会更新，受现代 Javascript 的限制， Vue 无法检测到对象属性的添加或删除

Vue 不允许在已经创建的实例上，动态地添加新的根级响应式属性(root-level reactive property)。然而，可以使用 Vue.set(object, key, value) 方法，将响应式属性添加到嵌套的对象上。

<p>{{user.age}}</p>
<input type="text" v-model="user.age">

app.user.age = 26

我们现在给user对象添加了一个age，但是我们改变age的时候，发现视图并没有跟着改变

现在我们重新设置一下

app.$set(app.user,'age',26)

现在我们再去改变age，发现视图已经可以跟着改变了

有时，你想要向已经存在的对象上添加一些新的属性，例如使用 Object.assign() 或 _.extend() 方法

在这种情况下，应该创建一个新的对象，这个对象同时具有两个对象的所有属性

Object.assign(app.user, {
  age: 27,
  favoriteColor: 'Vue Green'
})

可以通过如下方式，添加新的响应式属性

app.user = Object.assign({}, app.user, {
  age: 27,
  favoriteColor: 'Vue Green'
})