[Перевод] Новый этап эволюции Vue — Vapor
19 октября 2024 года завершился Vue Fes Japan 2024 — традиционное событие, которое собрало множество энтузиастов и экспертов в области веб-разработки, где рассказывали о будущем экосистемы вью. На этой конференции разработчик Кевин Денг подробно представил новый этап в эволюции фреймворка Vue — Vapor Vue. Ожидается, что Vapor Vue значительно повысит скорость работы фреймворка, делая его еще более эффективным и мощным инструментом для создания современных веб-приложений. Такой шаг в развитии не только обещает ускорение производительности, но и открывает новые горизонты для гибкости и адаптивности Vue в работе над сложными проектами. В данной статье мы расскажем о самом интересном в этой презентации.
Что такое Vapor
Vue Vapor представляет собой новый механизм рендеринга, который имеет следующие ключевые особенности:
Прямая работа с нативными API DOM.
Технология больше не полагается на виртуальный DOM, вместо этого напрямую вызывает нативные API DOM. Это позволяет уменьшить количество издержек, повышает производительность и снижает потребление памяти, поскольку сокращается количество промежуточных шагов и уменьшается нагрузка на систему.Уменьшение размера итогового бандла.
Этот подход уменьшает размер итогового бандла. При прямом использовании нативного API DOM исключается необходимость в коде для обработки виртуальных узлов DOM, что приводит к более компактному и быстрому загружаемому приложению, облегчающему использование, особенно для пользователей с медленным интернетом.Fine-grained rendering.
Теперь, основываясь на системе реактивности vue, можно точно отслеживать изменения данных и обновлять только то, что действительно необходимо. Это позволяет избежать повторного рендеринга всего компонента и поиска измененных узлов виртуального DOM.
Уменьшение бандла
Ранее я упоминал о важности уменьшения размера бандла. В результате использования прямого взаимодействия с нативными API DOM размер бандла сократился на впечатляющие 53,3% по сравнению со стандартным режимом виртуального DOM. Эти данные не учитывают размер самой системы реактивности, но даже без этого уменьшение уже является значительным и положительно сказывается на производительности приложения.
Ускорение производительности
Если же говорить про скорость работы, то за абсолютное значение можно взять ванильный js, который будет представлять собой 100%. Дальше идёт текущий рекордсмен — Solid, следом идёт многим полюбившийся Svelte. Теперь же Vue Vapor работает наравне со Svelte, что весьма впечатляет. Он заметно быстрее, чем режим Vue vDOM и React с Jotai. Несмотря на то, что Vapor уже превосходит Vue vDOM и React, его еще можно улучшить, и команда стремимся сделать его еще лучше.
Vapor не является отдельным режимом
Vapor — по своей сути, лишь подмножество vDOM, что приводит к некоторым ограничениям.
Текущий режим виртуального DOM (vDOM) поддерживает множество функций, таких как Options API, Composition API, пользовательские директивы, миксины и другие.
Vapor поддерживает исключительно Composition API и не включает Options API. Однако в будущем Options API может быть доступен через стороннюю библиотеку на основе отзывов пользователей.
Для работы с Vapor необходимо использовать инструменты сборки, такие как Babel, так как компилятор Vapor сложен и не позволяет запускать код напрямую в браузере через CDN, в отличие от vDOM. Запуск в браузере замедлил бы процесс и увеличил размер бандла, снижая эффективность по сравнению с vDOM.
Кроме того, Vapor поддерживает только