Почему вотчер не возвращает старое значение?

Question

[codharma]

Согласно документации, при использовании watch есть возможность получить старое, предыдуще значение данных. Но у меня оба значения одинаковые. В чем суть? https://codepen.io/dubx/pen/zjVQNv

watch: {
    array: function (o, n) {
      this.oldData = o
      this.newData = n
    }
  }

Answer 1

[lavezzi1]

Офф. документация говорит:

Note: when mutating (rather than replacing) an Object or an Array, the old value will be the same as new value because they reference the same Object/Array. Vue doesn’t keep a copy of the pre-mutate value.

Comments

[codharma]

Хм, ок. Зачем же тогда передается "старое" значение, если оно не старое? Как тогда получить копию предыдущего состояния для сравнения?

Answer 2

[0xD34F]

Добавление элементов в массив (удаление, изменение), как и аналогичные действия над объектами - они не приводят к созданию нового массива/объекта. Так что всё правильно - старые и новые значения одинаковы.

Чтобы иметь доступ к предыдущему значению, надо создавать новый массив. Т.е., например, сейчас у вас есть this.array.push('hello'). Вместо этого делайте this.array = [ ...this.array, 'hello' ].

Аналогично и с объектами - вместо какого-нибудь this.obj.prop = value будет this.obj = { ...this.obj, prop: value }.

UPD.

watch: {
    array: function (o, n) {
      this.oldData = o
      this.newData = n
    }
  }

У вас тут старое и новое значение местами перепутаны.