Как глубоко сравнить копию реактивного объекта и реактивный объект Vue 2?

Question

[Esm322]

Подскажите, как глубоко сравнить копию реактивного объекта и реактивный объект. Пробовал через сравнение JSON.stringify, через глубокое копирование перед сравнением, через isEqual lodash, через кастомный метод, ничего не срабатывает. Все действие происходит в вотчере:

handler(newValue) {
                    this.prevNote = newValue;
                    if (isEqual(this.prevNote, this.copy_note)) {
                        this.isNoteChanged = false;
                    }
                    if (!isEqual(this.prevNote, this.copy_note)) {
                        this.isNoteChanged = true;
                    }
                    // if (JSON.stringify(this.prevNote) !== JSON.stringify(this.copy_note)) {
                    //     this.isNoteChanged = true;
                    // }
                    //
                    // if (JSON.stringify(this.prevNote) === JSON.stringify(this.copy_note)) {
                    //     this.isNoteChanged = false;
                    // }
            },
            deep: true,

Answer 1

[0xD34F]

ничего не срабатывает

Ошибки какие получаете? Или "не срабатывает" следует понимать как "результат работы отличается от ожидаемого"?

глубокое копирование перед сравнением

То есть, сделали копию и стали сравнивать её с оригиналом. С которого эта копия только что была снята. Толково придумано. Надо ли удивляться, что в ста случаях из ста никаких изменений выявлено не будет?

Копировать надо не перед сравнением, а после внесения изменений:

computed: {
  objCopy() {
    return structuredClone(this.obj);
  },
  ...

Следим не за оригиналом, а за копией - так будут доступны два действительно разных объекта, до изменений и после:

watch: {
  objCopy(newVal, oldVal) {
    // здесь можно сравнить старый и новый объекты
  },
  ...

Демо - есть вложенный объект, его можно редактировать (изменять, добавлять, удалять свойства), в наблюдателе сравнивается что было и что стало, пишутся соответствующие записи в лог (путь, по которому осуществлено редактирование; тип операции; старое и новое значения).

Answer 2

[Николай]

Кажется я понял о чем вы.
Так обычно делают для того, чтобы сравнить, были ли изменения в форме и показать окно выхода.

Судя по всему, у вас 2vue.
На моменте инициализации, что мешает вам скопировать объект, сохранить его исходные данные и написать метод useCompare, который как раз, будет через cloneDeep сравнивать оригинал с тем, что было изменено.

Далее, на вотчкер смотрит за стейтом и сравнивает с оригиналом скопированным.
Скорее всего, у вас комирование идет по ссылке и значения у вас идентичные.

Но, если объект слишком глубокой вложенности, то, кажется, вы что-то делаете не так,