Почему не могу получить старое значение наблюдаемого объекта в Vue?

Question

[Vadim Sutormin]

Слушаю через watch объект, мне нужно знать старое значение одного из свойств объекта, но получаю только новые свойства. Почему так?

watch: {
worker: {
      handler: function(newWorker, oldWorker) {
      alert (newWorker.sum + ' ' + oldWorker.sum);
},
deep: true
}
}

Answer 1

[0xD34F]

Открываем документацию, читаем:

Обратите внимание: когда изменяете (а не заменяете) объект или массив, старое и новое значения при вызове коллбэка будут совпадать, так как они ссылаются на один и тот же объект или массив. Vue не сохраняет копии объекта на момент, предшествовавший изменениям.

Хотите иметь доступ к старому значению - следите не за всем объектом, а только за нужным свойством:

watch: {
  'obj.propName'(newValue, oldValue) {
    ...
  },
},

Если же надо следить за многими свойствами сразу, и создавать отдельный наблюдатель под каждое не хотите... Ну, вон там выше, в цитате из документации, прозрачно намекается, что делать - вместо изменения свойства заменяйте объект целиком на новый. Т.е., было obj.propName = value, а будет obj = { ...obj, propName: value }. Ну а дальше можно уже сравнивать свойства в старом и новом объектах, чтобы найти, какое конкретно было изменено.