Критический путь рендеринга (CRP) во Vue 3 начинается еще до запуска кода - на этапе сборки. Компилятор Vue - главный оптимизатор

🧩 Пример, теперь кухня фастфуда: В ролях: рецепты бургеров (vue template), повар (Vue). Повар получает заказы на разные бургеры, скажем обычный/сырный/острый. Изначально он начинает готовить каждый бургер с нуля, выпекает две булки, готовит котлету. Получается крайне неудобно и медленно, и клиенты, и сам повар негодуют. А что если статичную часть бургера просто закупать, а менять только отличающиеся ингредиенты? Повар достает готовые 2 булки, лист салата, греет котлету.. Так повара и оптимизировали. Это и делает компилятор Vue 3 - он выносит статичные части и следит только за тем, что может измениться.

⚙️ Под капотом: Компилятор анализирует и применяет Static Node Hoisting - статичные элементы создаются один раз и переиспользуются между рендерами.

Но главная магия для CRP - это PatchFlags. Компилятор помечает динамические узлы флагами, например, "меняется только текст" или "меняется только класс".  Если точнее, PatchFlags это битовые маски, например, TEXT=1, CLASS=2. Если у узла меняется и текст, и класс - компилятор присвоит ему 3 (1|2). Это позволяет движку за одну операцию проверять, что именно нужно обновить.

Теперь движку не нужно следить за статичными узлами, а за динамическими он следит выборочно, то есть только за текстом/классом в зависимости от флага (PatchFlags).

❓ Зачем это нужно: При обновлении VDOM движку не нужно сравнивать (diffing) все дерево, он смотрит на patchFlags и идет напрямую к нужному свойству игнорируя статику. Сложность падает с O(n), где n - общее количество узлов, до O(d), где d - динамические узлы

💡 Совет: Если у вас есть тяжелый статичный блок (например, большая SVG иконка), который точно никогда не изменится - используйте директиву v-once. А для список с редкими изменениями используйте v-memo - так вы скажите компилятору "сюда даже не смотри, если зависимости не менялись", это дополнительно ускорит рендер.