Сохраняйте обращение к props.count внутри computed: const doubled = computed(() => (props.count ?? 0) * 2). Обычная переменная получает снимок числа, а не живую связь с prop.
Как исправить потерю реактивности props в Vue script setup?
Сохраняйте обращение к props.count внутри computed: `const doubled = computed(() => (props.count ?? 0) * 2)`. Обычная переменная получает снимок числа, а не живую связь с prop.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
В Vue 3 компонент использует const props = defineProps({count:Number}); const count = props.count; const doubled = count * 2;. Родитель позже меняет count, но doubled остаётся старым. Нужен переносимый между версиями Vue 3 вариант без мутации prop.
Ответ
Сохраняйте обращение к props.count внутри computed: const doubled = computed(() => (props.count ?? 0) * 2). Обычная переменная получает снимок числа, а не живую связь с prop.
import {computed} from 'vue';
const props = defineProps({count: Number});
const doubled = computed(() => (props.count ?? 0) * 2);
В новых версиях Vue прямое деструктурирование результата defineProps может обрабатываться компилятором особым образом, но отдельное присваивание const count = props.count не следует считать таким преобразованием. Изменения исходного значения инициирует родитель; дочерний компонент при необходимости отправляет событие.
Источник: vuejs.org.