Как отслеживать любые изменения в объекте data?

Question

[verycooldev]

Ломаю голову над проблемой. Есть компонент Article.vue в краде. Один и тот же компонент я хочу использовать как для создания так и для обновления. И во втором случае мне надо отслеживать ЛЮБЫЕ изменения существующих данных (которые прилетают от бэка). Пытаюсь сделать с watch, но ничего не получается.

props: ['articleProp'],
    data() {
        return {
            article: {
                title: null,
                description: null
            }
        }
    },
    watch: {
        article: {
            deep: true,
            handler(newValue, oldValue) {
                console.log('triggered')
            }
        }
    },
    mounted() {
        if (this.articleProp) {
            Object.keys(this.articleProp).filter(key => key in this.article).forEach(key => {
                this.article[key] = this.articleProp[key]
            })
        }
    }

Проблема в том, что я назначаю this.article в mounted и watch срабатывает тогда когда мне не надо. Кроме того, вотчер возвращает оба одинаковых значения и невозможно ничего отследить!!! Я нифига не пойму вообще что делать?

Как сделать назначение существующих данных и ПОТОМ отслеживать изменения в вотчере?

Answer 1

[0xD34F]

watch срабатывает тогда когда мне не надо

Ну так и включайте наблюдение только тогда, когда вам это нужно. Как это сделать, можете прочесть в документации.

вотчер возвращает оба одинаковых значения

Что естественно - от того, что вы изменили какое-то из свойств объекта, объект не заменит себя своей копией. Хотите, чтобы старое и новое значение были разными - заменяйте объект целиком.

Comments

[verycooldev]

Спасибо. Это решение

this.$watch('article', function () {
      this.show = true
    }, {deep: true})

Answer 2

[Алексей Ярков]

handler(newValue, oldValue) {
  if (oldValue.title === null && description.title === null) {
    console.log('init')
  } else {
    console.log('change')
  }
}

Так попробуйте. Но вообще пересмотрите логику, что-то явно не так пошло.

Comments

[verycooldev]

там 25 таких значений в data

[verycooldev]

Что именно по вашему мнению пошло не так с логикой из того что вы увидели?

[Алексей Ярков]

verycooldev, то что приходится так костылить.
Заведите флаг, который после инициализации будет инвертирован и в вотчере смотрите на флаг.

props: ['articleProp'],
    data() {
        return {
            inited: false,
            article: {
                title: null,
                description: null
            }
        }
    },
    watch: {
        article: {
            deep: true,
            handler(newValue, oldValue) {
                if (this.inited) {
                    console.log('triggered')
                }
            }
        }
    },
    mounted() {
        if (this.articleProp) {
            Object.keys(this.articleProp).filter(key => key in this.article).forEach(key => {
                this.article[key] = this.articleProp[key]
            })
            this.inited = true
        }
    }

[verycooldev]

Алексей Ярков, да, вариант с флагом мне в чате Вью подсказали. Работает, но грязновато. Я решил тем, что я вотчер динамический использую (раньше так не делал). Хорошее и чистое решение (совсем не костыль)

[Антон Швец]

verycooldev, основной "не так" в том, что вы вместо того, чтобы осуществлять действия сразу после получения данных, сначала меняете данные, а потом следите за ними. Непроще ли наоборот.
Сделайте метод мутации данных и изменяйте data через него.

[Антон Швец]

verycooldev, а еще представте, у вас компонент разросся, куча данных, куча методов, и где то там заныкался динамический вотчер и уже никто не помнит кем и зачем все это было написано.

[verycooldev]

Антон, я чувстввую вы дело предлагаете, но увы я не совсем понимаю как это реализовать

Сделайте метод мутации данных и изменяйте data через него.

Все равно ведь в mounted метод вызывать? Так какая тогда разница? Как следить за изменениями-то, если вотчер не использовать?

[Антон Швец]

verycooldev, у вас изменения откуда то извне чтоли приходят? Каким образом меняется data? И что вы хотите делать при изменении data?

[verycooldev]

Антон, конечно извне, я вроде писал - с API прилетает существующая статья. После этого я ее меняю и мне надо отслеживать это изменение (уже после того как прилетают данные, а не тогда когда эти данные присваиваются к data - это ключевой момент). При изменении дата я хочу делать да что угодно - показывать кнопку, надпись, модалку (какое это имеет значение)

[Антон Швец]

verycooldev,

я вроде писал - с API прилетает существующая статья

что значит с апи прилетает? не магическим образом же. Каким то образом данные попадают в компонент. Каким? В каком месте вы меняете data?

При изменении дата я хочу делать да что угодно - показывать кнопку, надпись, модалку (какое это имеет значение)

Кнопки показываются посредством v-if, основываясь на каких то текущих данных, модалки по евенту. Флаги с какой-либо логикой рассчитываются в computed.
Я к тому, что вотчить всю дату обычно не нужно.

[verycooldev]

Антон, написано же все в вопросе!!! Какая магия?

mounted() {
        if (this.articleProp) {
            Object.keys(this.articleProp).filter(key => key in this.article).forEach(key => {
                this.article[key] = this.articleProp[key]
            })
        }
    }

Вы мне задаете вопрсоы на которые я уже тут 3 раза как минимум ответил. И все советы левые абсолютно. Какой нахер v-if?))) Ты даже вопрос не осилил (причем с третьей попытки). Все ясно.

[Антон Швец]

verycooldev, не груби. я задаю наводящие вопросы, а ты не можешь въехать зачем и нервничаешь.
Причем ни на один из вопросов так и не ответил.