Как правильно присваивать значение свойству во vue?

Question

[WebDev]

Где-то в документации было сказано, что вложенным свойствам объекта нельзя напрямую присваивать значения, так как vue не сможет отследить их изменение.
Например нельзя делать так:
product.info.name = 'New value';
Вместо этого нужно использовать Vue.set:
Vue.set(product.info, 'name', 'New value');
У меня же почему-то работает первый вариант.
Как правильно?

Comments

[Кирилл Романов]

А изначально поле name в product.info существует?

[antimodern]

Кирилл Романов, конечно сущесвет, раз у него работает))

Answer 1

[Сергей delphinpro]

При создании экземпляра Vue пробегается по всем имеющимся свойствам на всю глубину и присобачивает к ним геттеры и сеттеры, которые запускают внутренние механизмы реакции на изменение свойтсв, делая их реактивными.
Когда вы просто добавляете новое свойство, никаких геттеров/сеттеров к нему автоматически не навешивается, и Vue не может отслеживать изменения.
Именно поэтому для добавления новых свойств необходимо использовать метод Vue.set(), который при создании через defineProperty проинициализирует все внутренние механизмы реактивности.

Answer 2

[nvdfxx]

Вроде как, там сказано, что нельзя делать так

data() {
    return {
        a: {
            b: 5
        }
    }
},
methods: {
    method1() {
        this.a.c = 6 // нильзя
        this.a.b = 6 // можна
    }
}

Нельзя создавать новые вложенные значения таким способом, про менять уже существующие ничего не сказано