Що роблять директиви v-once і v-memo і коли вони доречні?

Обидві директиви дозволяють пропустити роботу з оновлення частини шаблону.

v-once - відрендерити елемент чи компонент один раз і більше ніколи не оновлювати:

<footer v-once>
  <p>© {{ year }} {{ companyName }}</p>
  <LegalLinks />
</footer>

При наступних рендерах Vue пропускає всю цю гілку разом з нащадками. Підходить для статичного за змістом вмісту, що будується з даних лише раз.

v-memo - оновлювати лише тоді, коли змінилося одне зі значень у масиві залежностей:

<div v-for="item in list" :key="item.id" v-memo="[item.id === selectedId]">
  <p>ID: {{ item.id }} - вибрано: {{ item.id === selectedId }}</p>
  <ExpensiveRow :item="item" />
</div>

Коли змінюється selectedId, перерендерюються лише два рядки - той, що втратив вибір, і той, що його отримав. Решта тисячі рядків пропускається.

Коли це має сенс:

• v-memo - великі списки (сотні й тисячі елементів), де зміна стосується небагатьох рядків, і вимірювання показали, що рендер списку гальмує;
• v-once - великі статичні блоки, побудовані з даних, які не змінюються протягом життя компонента.

Пастки:

• забута залежність: якщо в шаблоні під v-memo використано значення, якого немає в масиві, зміни цього значення не з'являться на екрані. Найчастіша помилка - баг виглядає як «реактивність зламалася»;
• v-memo="[]" працює як v-once;
• v-memo всередині v-for не працює на дочірніх елементах - тільки на тому ж елементі, що й v-for;
• передчасна оптимізація: у більшості компонентів оновлення й так дешеві. Ці директиви - інструмент для виміряних проблем, а не для кожного шаблону;
• v-once на компоненті з даними, які все ж змінюються (наприклад, переклад після зміни мови), - застарілий інтерфейс.

Докладніше в документації: Вбудовані директиви: v-memo