Vue 3.2 и прирост скорости

Vue 3.2, новая версия популярного JavaScript фреймворка, предлагает более высокую производительность, а также улучшения отдельных файловых компонентов и веб-компонентов.

В обновлении система реактивности Vue, предназначенная для упрощения управления состоянием, получила более эффективную реализацию ссылок, более быстрое отслеживание зависимостей и меньшее использование памяти. Производительность компилятора шаблонов также была улучшена благодаря более быстрому созданию Vnodes. Новая директива v-memo предоставляет возможность «запоминать» часть дерева шаблонов. v-memo позволяет Vue вообще пропустить сравнение виртуального DOM и создание новых Vnodes. Эта возможность может повысить производительность в определенных сценариях, таких как большие списки v-for.

Для веб-компонентов Vue 3.2 представляет метод defineCustomElement для создания собственных пользовательских элементов с использованием API-интерфейсов компонентов Vue. Разработчики могут создавать библиотеки компонентов пользовательского интерфейса на основе Vue, которые можно использовать с любым фреймворком или вообще без фреймворка.

Для однофайловых компонентов (SFC), также известных как файлы «.vue», две функции перешли из экспериментального статуса в стабильный: <настройка сценария>, синтаксический сахар <script setup> для улучшения эргономики при использовании Composition API внутри SFC, и <style> v-bind, что позволяет использовать динамические значения CSS, управляемые состоянием компонента, в тегах SFC <style>.

Еще про оптимизации в Vue 3.2

Для рендеринга на стороне сервера пакет @vue/server-renderer поставляет сборку модуля ES, которая отделена от встроенных модулей Node.js, что позволяет объединять и использовать @vue/server-renderer для использования внутри не es модулей js, такие как Cloudflare Workers или Service Workers. API потокового рендеринга также были улучшены благодаря новым методам API Web Stream.

API Effect Scope был представлен для управления временем удаления реактивных эффектов (вычисляемых и наблюдателей), упрощая использование API-интерфейса реактивности Vue вне контекста компонента и открывая некоторые расширенные варианты использования внутри компонентов. Этот низкоуровневый API предназначен в основном для авторов библиотек. RFC этой функции охватывает мотивацию и варианты использования.

Vue 3.2 также содержит некоторые исправления ошибок. Хотя критических изменений в общедоступных API нет, есть некоторые примечания, связанные с совместимостью. Например, код, сгенерированный компилятором шаблонов в Vue 3.2 и более поздних версиях, не будет совместим с предыдущими версиями среды выполнения из-за использования новых помощников среды выполнения. Полный журнал изменений для Vue 3.2 можно найти на GitHub.