Skip to main content

Як Vue оптимізує Virtual DOM?

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

1. Оптимізація на етапі компіляції (Compile-time optimization)

Vue-компілятор аналізує шаблон і помічає ділянки, які НЕ змінюються, як static nodes.

Це означає:

  • статичні частини взагалі не беруть участі в diff
  • вони створюються один раз і більше не перевіряються
  • віртуальні ноди для них не перестворюються

Приклад:

vue
<div> <h1>Заголовок</h1> <!-- статично --> <p>{{ message }}</p> <!-- динамічно --> </div>

Vue позначить <h1> як статичний вузол. Він не братиме участі в порівнянні та оновленні.

Це сильно зменшує diff-дерево.

2. Patch flags - прапори патчингу (Vue 3)

Головне нововведення Vue 3.

Під час компіляції Vue додає спеціальні прапори:

  • TEXT - змінюється тільки текст
  • PROPS - змінюються тільки певні пропси
  • CLASS - змінюється тільки клас
  • STYLE - змінюються тільки стилі

Це дозволяє Vue не порівнювати всю віртуальну ноду, а одразу застосовувати конкретне оновлення, минаючи diff.

Приклад віртуальної ноди з прапором:

js
// Vue знає, що змінюється тільки текст createVNode("p", null, message, PatchFlags.TEXT)

Diffing виконується точково, а не для всього дерева.

3. Block Tree (блочне дерево)

Vue 3 використовує структуру блоків, які:

  • групують динамічні частини
  • виключають статичні піддерева
  • мінімізують кількість порівнюваних нод

Це величезна оптимізація, якої немає в React.

Ідея:

Динамічні елементи відстежуються окремо, а статичне дерево взагалі не бере участі в diff.

Це в рази зменшує роботу алгоритму порівняння.

4. Hoisting - винесення статичних вузлів

Статичні елементи "виносяться" за межі рендеру і створюються тільки один раз:

js
const _hoisted_1 = /*#__PURE__*/ createVNode(...)

Рендер-функція:

  • не перестворює вузол
  • не порівнює його
  • використовує заздалегідь створений кеш

Менше створення об'єктів → менше GC → швидший рендер.

5. Memoization (v-memo)

Vue може кешувати фрагменти шаблону:

vue
<div v-memo="[count]"> {{ expensiveComputation }} </div>

Якщо count не змінився → Vue пропускає дифф усієї секції.

6. Оптимізація списку через ключі (v-for + key)

Vue ефективно порівнює списки, якщо задати ключ:

vue
<li v-for="item in list" :key="item.id">

Алгоритм:

  • мінімально переміщує елементи
  • не перерендерює зайве
  • використовує O(n) оптимізації

Без ключів продуктивність падає.

7. Reactive refs і reactive → точкові оновлення

Vue 3 використовує проксі-реактивність:

  • оновлюється тільки конкретне поле
  • тільки конкретний watcher
  • тільки потрібний компонент
  • тільки потрібний шматок VDOM

Це мінімізує запуск рендеру.

8. Tree-shaking і оптимізація збірки

Vue 3 - повністю tree-shakable:

  • невикористані функції не потрапляють у бандл
  • менше коду → швидше завантаження → швидший рендер

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

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

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

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