Skip to main content

Що таке мемоізація в контексті Vue?

VueJunior~1 хв читання
Запропонувати правку

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

Простіше кажучи:

Мемоізація дозволяє Vue не перераховувати і не перерендерювати фрагменти, якщо їхні залежності залишилися незмінними.

У Vue це стосується:

  • computed
  • v-memo
  • оптимізацій компілятора (patch flags & block tree)
  • функцій у Composition API

1. Мемоізація в computed()

computed - це кешована обчислювана функція.

Приклад:

js
const fullName = computed(() => { console.log('computed called') return user.first + ' ' + user.last })

Навіть при множинних рендерах:

  • обчислення відбудеться тільки один раз
  • повторно перерахується тільки коли зміняться залежності

Це основний приклад мемоізації.

2. Мемоізація шаблонів через v-memo (Vue 3)

Vue 3 надає директиву v-memo, яка дозволяє кешувати фрагменти шаблону:

vue
<div v-memo="[id]"> {{ expensiveCalculation }} </div>

Блок перерендериться тільки якщо id змінився.

Якщо ні - Vue взагалі пропускає diff.

3. Мемоізація на рівні Virtual DOM (patch flags + block tree)

Vue 3 компілює шаблон так, що:

  • статичні вузли виносяться в кеш (hoisting)
  • динамічні позначаються patch-флагами
  • блоки (block tree) включають тільки змінювані елементи

Підсумок:

Vue "мемоїть" статичні елементи і не перевіряє їх при diff.

По суті - мемоізація шаблону на рівні Virtual DOM.

4. Мемоізація за допомогою shallowRef / markRaw

Коли є важкий об'єкт, який не повинен викликати рендер:

js
const chart = shallowRef(null) // або const engine = markRaw(new HeavyEngine())

Vue мемоізує об'єкт - відстежує тільки верхній рівень, а не всю структуру.

5. Мемоізація функцій у Composition API

Функції, що повертають реактивні дані (composables), теж можуть бути мемоізовані, наприклад, викликати їх один раз і повторно використовувати результат, а не створювати заново.

Навіщо потрібна мемоізація у Vue?

Щоб зменшити:

  • кількість обчислень
  • кількість перерендерів
  • навантаження на Virtual DOM
  • час роботи watchers
  • час patch-навігації

І збільшити:

  • FPS
  • швидкість оновлення інтерфейсу
  • чуйність застосунку

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

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

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

Запропонувати правку