Комментарий пользователя
Привет! Пользуюсь Composition API и сделал const state = reactive({ name: ‘A’, count: 0 }), затем const { name } = state и вернул name в шаблон — изменения не отслеживаются. Почему так получается и как сделать правильно?
Ответ специалиста
Здравствуйте, Павел! Причина в том, что reactive отдает прокси-объект, а обычная деструктуризация копирует примитивы — вы получаете неглубокую копию и теряете связь с реактивностью.
Быстрые варианты решения: вернуть весь state и обращаться как state.name, использовать toRefs(state) чтобы получить реактивные ссылки, или применять ref для отдельных примитивов. Ниже короткие рабочие примеры.
Ошибка — деструктуризация теряет реактивность:
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({ name: 'A' });
const { name } = state; // plain value, реактивность потеряна
return { name };
}
};
Правильно — вернуть сам state и в шаблоне {{ state.name }}:
const state = reactive({ name: 'A' });
return { state };
Если хочется отдельные переменные — toRefs:
import { reactive, toRefs } from 'vue';
const state = reactive({ name: 'A', count: 0 });
return { ...toRefs(state) }; // можно достать name, count как refs
Или использовать ref для простых случаев:
import { ref } from 'vue';
const name = ref('A');
return { name };
Если планируете деструктурировать поля состояния — всегда применяйте toRefs, это самый безопасный паттерн.
Стройте проекты на Vue вместе с Академией Selectel и получайте свежие уроки и советы.
