Отслеживание изменений в объектах

Предостережения об изменениях объектов

Опять же, из-за ограничений JavaScript, Vue не может обнаружить добавление или удаление свойств. Например:

var vm = new Vue({
  data: {
    a: 1
  }
})
// свойство `vm.a` реактивно

vm.b = 2
// свойство `vm.b` НЕ реактивно

Vue не позволяет динамически добавлять новые реактивные свойства на корневом уровне уже созданного экземпляра. Тем не менее, можно добавить реактивные свойства к вложенному объекту с помощью метода Vue.set(object, propertyName, value). Например, для следующего:

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

Можно добавить новое свойство age для вложенного объекта userProfile:

Vue.set(vm.userProfile, 'age', 27)

Также можно использовать метод экземпляра vm.$set, который является псевдонимом для глобального Vue.set:

vm.$set(vm.userProfile, 'age', 27)

Иногда может потребоваться добавить ряд новых свойств существующему объекту, например, используя Object.assign() или _.extend(). В таких случаях, нужно создать новый объект со свойствами обоих объектов. Поэтому вместо:

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

Следует добавлять новые реактивные свойства таким образом:

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