Skip to main content

Навіщо потрібен patch flag?

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

Patch Flag - це спеціальний прапорець, який Vue 3 додає до кожної віртуальної ноди при компіляції шаблону. Ці прапорці допомагають рушію рендера зрозуміти, які саме частини ноди можуть змінитися, щоб не виконувати повний diff.

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

Patch Flag - це підказка для рушія, що потрібно оновлювати, а що можна пропустити. Це дозволяє Vue оновлювати DOM точково, а не порівнювати всю ноду цілком.

Навіщо потрібен patch flag? (головна причина)

Щоб сильно прискорити Virtual DOM.

У класичному Virtual DOM (наприклад, React без оптимізацій):

  1. Порівнюються ВСІ props
  2. Порівнюються ВСІ атрибути
  3. Порівнюються ВСІ дочірні ноди

Vue 3 робить інакше:

  • на етапі компіляції розуміє, які частини шаблону динамічні

  • позначає такі вузли спец-прапорцем

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

  • це величезний приріст продуктивності.

Як працює patch flag?

Приклад:

vue
<p>{{ message }}</p>

Vue розуміє, що динамічний тільки текст, і генерує ноду:

js
createVNode("p", null, message, PatchFlags.TEXT)

При оновленні Vue знає:

  • НЕ потрібно порівнювати пропси
  • НЕ потрібно порівнювати атрибути
  • НЕ потрібно порівнювати дітей (окрім тексту)
  • оновити тільки текстову ноду

Приклади patch flags

Нижче кілька ключових прапорців, які варто знати:

ПрапорецьОпис
TEXTЗмінюється тільки текст
PROPSЗмінюються тільки визначені пропси
CLASSЗмінюється тільки клас
STYLEЗмінюються тільки стилі
FULL_PROPSДинамічні всі пропси
HYDRATE_EVENTSДинамічно навішуються події
KEYED_FRAGMENTФрагмент зі списком за ключем
UNKEYED_FRAGMENTФрагмент зі списком без ключа

Vue використовує саме ті операції оновлення, які потрібні, а не намагається зробити «все».

Чому patch flags прискорюють Vue?

1. Vue не робить повний diff

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

2. Vue пропускає важкі перевірки

Наприклад, якщо прапорець TEXT - ні пропси, ні події, ні атрибути не перевіряються.

3. Vue не перестворює зайві віртуальні ноди

Якщо елемент статичний - він створюється 1 раз.

4. Чим більше прапорців, тим швидше SPA

Тому що Vue витрачає менше часу на порівняння.

Приклад для розуміння

Шаблон:

vue
<button @click="inc" :class="active ? 'on' : 'off'"> {{ count }} </button>

Vue позначить:

  • текст → TEXT
  • class → CLASS
  • подію → HYDRATE_EVENTS

При оновленні count:

  • оновлюється тільки текст
  • class і event НЕ перевіряються

При зміні active:

  • оновлюється тільки class
  • текст і event НЕ перевіряються

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

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

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

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