В чем разница отрисовки HTML страницы в браузере и работы с фреймворком Vue

Что проверяют

Понимаете ли вы, что Vue не заменяет браузерный рендеринг, а работает поверх него, и где проходит граница. Следом часто просят объяснить, как Vue узнаёт об изменении данных и когда после этого обновляется DOM.

Как отвечать

Сначала браузер. Он разбирает HTML в DOM, CSS в CSSOM, строит дерево отрисовки, считает раскладку (layout), рисует (paint) и собирает слои (composite). При изменении DOM страница не перерисовывается целиком, пересчитывается затронутое. Дорого обходятся частые правки, вызывающие layout, особенно вперемешку с чтением размеров.

Vue добавляет слой в JavaScript, а результат проходит через тот же конвейер:

• компиляция шаблона: шаблон SFC при сборке через Vite превращается в render-функцию. Компилятор помечает статические узлы и динамические места (patch flags), чтобы не сравнивать лишнее;
• реактивность: в Vue 3 построена на Proxy. ref и reactive запоминают, какой эффект читал данные, и при записи планируют перерендер только зависимых компонентов;
• пакетное обновление: изменения копятся и применяются асинхронно, в микрозадаче. Новое состояние DOM доступно после await nextTick();
• виртуальный DOM: новое дерево сравнивается с предыдущим виртуальным деревом, и в реальный DOM уходят только точечные операции.

Отдельно про первую загрузку. SPA на Vue отдаёт почти пустой HTML с <div id="app">, контент появляется после загрузки и выполнения JS. Если важны первый показ и SEO, берут SSR или пререндер через Nuxt: сервер отдаёт готовый HTML, клиент его гидрирует.

Где спотыкаются

Говорят, что виртуальный DOM сравнивается с реальным. Сравниваются два виртуальных дерева, реальный DOM при этом не читается.

Утверждают, что с Vue страница рисуется быстрее, чем с «голым» DOM. Виртуальный DOM это накладные расходы, точечная ручная правка быстрее. Выигрыш Vue в декларативности и в том, что лишних правок не делаешь по ошибке.

Меняют данные и сразу читают размеры или текст элемента, получая старое значение: не знают про асинхронное обновление и nextTick.