Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить директива v-memo?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`v-memo`** - це оптимізаційна директива Vue 3.3+, яка каже фреймворку не перемальовувати фрагмент шаблону, поки не зміниться конкретний набір залежностей. **Ключове:** якщо жодна залежність зі списку не змінилася, Vue пропускає оновлення віртуального DOM і ререндер цього фрагмента, що прискорює застосунок з важкими списками чи компонентами.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`v-memo` - це **оптимізаційна директива Vue 3.3+**, яка говорить фреймворку: > **«Не перемальовуй цей фрагмент шаблону, поки не зміниться конкретний набір залежностей».** Тобто це *умовний пропуск оновлень* (memoization), схожий на `React.memo`. --- ## Простими словами `v-memo` дозволяє **кешувати частину шаблону**. Якщо залежності не змінилися - Vue пропускає: - оновлення віртуального DOM - порівняння вузлів (diff) - ререндер компонента Це може **сильно прискорити** застосунок з важкими компонентами, таблицями, списками тощо. --- ## Синтаксис ```html <div v-memo="[id, name]"> <!-- контент, який Vue не буде оновлювати, поки id і name не зміняться --> </div> ``` Масив - це список залежностей. --- ## Приклад ```html <div v-memo="[user.id]"> <h3>{{ user.name }}</h3> <p>{{ user.email }}</p> </div> ``` Якщо `user.name` або `user.email` зміняться, а `user.id` - ні: - Цей фрагмент *не оновиться*. - Vue пропустить його під час діфінгу. Тобто у вас ніби **заморожений шматок шаблону**, поки не зміниться `user.id`. --- ## Де це корисно ### 1. Великі списки Наприклад, таблиця з тисячами рядків: ```html <tr v-for="row in rows" :key="row.id" v-memo="[row.id]"> <td>{{ row.value1 }}</td> <td>{{ row.value2 }}</td> <td>{{ computeHeavy(row) }}</td> </tr> ``` Якщо об'єкт `row` оновився без зміни `row.id` - Vue пропустить ререндер рядка. --- ### 2. Важкі обчислення в шаблоні ```html <div v-memo="[item.version]"> {{ heavyComputation(item.data) }} </div> ``` --- ### 3. Часткове заморожування UI Можна уникнути зайвого оновлення віджетів, банера, статичних блоків. --- ## Важливі моменти - `v-memo` працює **тільки при оновленні**, перший рендер завжди виконується. - Якщо будь-яка залежність змінилася → весь фрагмент оновиться повністю. - Це *ручна* оптимізація - застосовувати варто тільки коли є проблема. --- ## Не плутати з: #### `v-once` - рендер один раз, потім *ніколи* не оновлюється - жорстко статичний #### `v-memo` - оновлюється *тільки при зміні залежностей* - більш гнучкий і керованийДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.