{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Block Tree (блочное дерево)"},{"type":"text","text":" — это внутренняя оптимизационная структура Vue 3, которая позволяет "},{"type":"text","marks":[{"type":"bold"}],"text":"значительно уменьшить объём сравниваемого Virtual DOM"},{"type":"text","text":" и ускорить рендеринг."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это одна из ключевых причин, почему Virtual DOM в Vue 3 работает быстрее, чем в Vue 2 и быстрее, чем в React до появления Server Components."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проще говоря:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Block Tree — это дерево блоков, где Vue отделяет динамические части шаблона от статических и обновляет только те узлы, которые действительно могут измениться."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Зачем нужен Block Tree?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В Vue 2 и классическом Virtual DOM подходе "},{"type":"text","marks":[{"type":"bold"}],"text":"diffing"},{"type":"text","text":" сравнивал ВСЁ дерево, даже те узлы, которые гарантированно не меняются."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Дорого? Да."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue 3 решил эту проблему."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🚀 Как работает Block Tree?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда Vue 3 компилирует шаблон, он:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Анализирует весь шаблон"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Строит "},{"type":"text","marks":[{"type":"bold"}],"text":"дерево блоков"},{"type":"text","text":" — каждый блок содержит только "},{"type":"text","marks":[{"type":"bold"}],"text":"динамические узлы"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Статические узлы "},{"type":"text","marks":[{"type":"bold"}],"text":"выносятся за пределы блока"},{"type":"text","text":" и больше НЕ участвуют в diff"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Итог:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"diff работает "},{"type":"text","marks":[{"type":"bold"}],"text":"только по динамическим узлам"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"статические — вообще не проверяются"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"производительность → резко выше"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Пример для понимания"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"Шаблон:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"

Заголовок

\n \n

\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Vue анализирует:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" — статичный"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"
{{ message }}"},{"type":"text","text":" — динамичный (TEXT)"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"

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

Комментарии