Що робить директива v-memo?

VueJunior~1 хв читання

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`

оновлюється тільки при зміні залежностей
більш гнучкий і керований

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.