Skip to main content

Що таке block tree (Vue 3)?

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

Block Tree (блочне дерево) - це внутрішня оптимізаційна структура Vue 3, яка дозволяє значно зменшити обсяг Virtual DOM, що порівнюється, і пришвидшити рендеринг.

Це одна з ключових причин, чому Virtual DOM у Vue 3 працює швидше, ніж у Vue 2, і швидше, ніж у React до появи Server Components.

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

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

Навіщо потрібен Block Tree?

У Vue 2 і класичному підході Virtual DOM diffing порівнював УСЕ дерево, навіть ті вузли, які гарантовано не змінюються.

Дорого? Так.

Vue 3 вирішив цю проблему.

Як працює Block Tree?

Коли Vue 3 компілює шаблон, він:

  1. Аналізує весь шаблон
  2. Будує дерево блоків - кожен блок містить лише динамічні вузли
  3. Статичні вузли виносяться за межі блоку і більше НЕ беруть участі в diff

Підсумок:

  • diff працює лише по динамічних вузлах
  • статичні - взагалі не перевіряються
  • продуктивність -> різко вища

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

Шаблон:

vue
<div> <h1>Заголовок</h1> <p>{{ message }}</p> <button @click="inc">+</button> </div>

Vue аналізує:

  • <h1> - статичний
  • <p>{{ message }} - динамічний (TEXT)
  • <button @click="inc"> - динамічний (EVENT)

І створює блок:

Block { dynamicChildren: [ p (TEXT), button (EVENT) ] }

А <h1> розміщується за межами блоку.

Тепер Vue під час оновлення буде порівнювати й патчити ЛИШЕ <p> і <button>. <h1> взагалі ігнорується (навіть якщо таких елементів 1000).

Чому це швидше?

Тому що:

До Vue 3:

Diff -> рекурсивне порівняння ВСЬОГО DOM-дерева.

Vue 3 + Block Tree:

Diff -> порівняння лише динамічних вузлів.

Це може бути різниця в 10 разів на великих компонентах.

Важлива деталь: Block Tree = база для patch flags

Block Tree працює в парі з patch-флагами:

  • TEXT
  • PROPS
  • CLASS
  • STYLE
  • EVENT
  • і т.д.

Vue точно знає, які частини ноди можуть змінитися.

Не потрібно робити повний diff -> робота точкова.

Реальні переваги Block Tree

Значно менше роботи під час оновлення DOM

Лише динаміка -> жодної зайвої перевірки.

Менше сміття в пам'яті

Статичні вузли створюються один раз і кешуються.

Швидший рендер і re-render

Особливо в компонентах з:

  • великими таблицями
  • списками
  • heavy UI
  • layout-компонентами

Основа компіляторних оптимізацій Vue 3

Block Tree дозволяє Vue-компілятору бути «розумним».

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

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

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

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