Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Навіщо потрібен patch flag?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Patch Flag** - це спеціальний прапорець, який Vue 3 додає до кожної віртуальної ноди при компіляції шаблону, щоб рушій рендера знав, які саме частини ноди можуть змінитися. **Ключове:** завдяки цьому Vue оновлює DOM точково, не порівнюючи пропси, атрибути й дітей, які позначені як статичні, що суттєво прискорює рендеринг.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**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 НЕ перевіряютьсяДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.