Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як Vue оптимізує Virtual DOM?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Vue-компілятор аналізує шаблон і помічає ділянки, які **не змінюються**, як static nodes, а Vue 3 додає patch flags, block tree, hoisting і memoization для точкового оновлення. **Ключове:** статичні частини взагалі не беруть участі в diff, тому порівнюється тільки те, що реально може змінитися.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## 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: - невикористані функції не потрапляють у бандл - менше коду → швидше завантаження → швидший рендерДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.