Как корректно добавлять новые реактивные свойства в объект во Vue?

Question

Во Vue нельзя просто добавить новое свойство в объект и ожидать реактивности. Для этого используются специальные API. В Vue 2 применяется Vue.set или this.$set. В Vue 3 проблема решена за счёт Proxy, и новые свойства становятся реактивными автоматически. Выбор подхода зависит от версии Vue.

YeaHub · Accepted Answer

Корректное добавление новых реактивных свойств зависит от того, какая версия Vue используется в проекте.Vue 2 и ограничения реактивностиВ Vue 2 реактивность построена на Object.defineProperty.Особенности:Реактивными становятся только существующие свойстваНовые свойства не отслеживаются автоматическиТребуется явное уведомление системы реактивностиИспользование Vue.setДля добавления реактивного свойства применяется специальный метод.this.$set(this.user, 'age', 30);
// или
Vue.set(this.user, 'age', 30);
В этом случае:Свойство становится реактивнымОбновляется шаблонКорректно срабатывают watch и computedVue 3 и ProxyВ Vue 3 реактивность основана на Proxy.Преимущества:Новые свойства отслеживаются автоматическиНет необходимости в специальных методахПоведение ближе к нативному JavaScriptПример:this.user.age = 30; // реактивно
Практические рекомендацииИнициализировать все свойства заранее, если это возможноИспользовать Vue.set в Vue 2Учитывать версию Vue при проектировании состоянияВыводДля корректной реактивности новые свойства должны добавляться через специальные механизмы Vue 2 или автоматически отслеживаются в Vue 3 благодаря Proxy.