Урок 03 · 11 хв

Список, computed, ключ

v-for без :key — пастка. Computed — кеш формули, а не метод «на кожен чих».

v-for="item in items" малює список. Завжди :key="item.id". Computed: const pricey = computed(() => items.value.filter((i) => i.price > 100)). Перерахується, лише якщо залежності змінилися. Метод у шаблоні {{ filter() }} викликається на кожен рендер — для фільтра це зайва робота.

Список

Можна спитати про це правило«Не мутуй реактивний масив «потай», якщо копія потрібна явно»

v-if і v-for на одному елементі не дружать. Обгортка або computed-список.
watch — коли треба сходити в API на зміну. Не підміна computed.
Пропси в дочірній: defineProps. Угору — emit. Як і всюди: дані вниз, події вгору.

Можна спитати про цей пункт«Суть уроку»

Перевірка

Закріпи, поки не пішов далі

1. Навіщо :key у v-for?
2. Чим computed кращий за метод у шаблоні для фільтра?
3. v-if і v-for на одному вузлі?