Официальный релиз Vue.js 3.0 «One Piece

Перевод: v3.0.0 One Piece

Сегодня мы с гордостью объявляем об официальном выпуске Vue.js 3.0 «One Piece». Эта новая основная версия платформы обеспечивает повышенную производительность, меньшие размеры сборок, лучшую интеграцию TypeScript, новые API-интерфейсы для решения крупномасштабных сценариев использования и прочную основу для долгосрочных будущих итераций платформы.

Релиз 3.0 представляет собой более двух лет усилий по разработке, включая 30+ RFC, 2600+ коммитов, 628 pull requests от 99 участников, а также огромный объем работ по разработке и документации за пределами основного репозитория. Мы хотели бы выразить нашу глубочайшую благодарность членам нашей команды за то, что они взяли на себя эту задачу, нашим участникам за pull requests, нашим спонсорам за финансовую поддержку и более широкому сообществу за участие в наших обсуждениях дизайна и предоставление отзывов на предварительные релизные версии. Vue — это независимый проект, созданный для сообщества и поддерживаемый сообществом, и Vue 3.0 был бы невозможен без вашей постоянной поддержки.

Дальнейшее развитие концепции «Прогрессивный фреймворк»

С самого начала у Vue была простая миссия: быть доступным фреймворком, который каждый может быстро изучить. По мере роста нашей пользовательской базы фреймворк также расширялся, чтобы адаптироваться к растущим требованиям. Со временем он превратился в то, что мы называем «Прогрессивный фреймворк»: фреймворк, который можно изучать и применять постепенно, обеспечивая при этом постоянную поддержку по мере того, как пользователь справляется со все более сложными сценариями.

Сегодня, когда во всем мире насчитывается более 1,3 миллиона пользователей *, мы видим, что Vue используется в самых разнообразных сценариях, от добавления интерактивности на обычные страницы, отображаемые на сервере, до полноценных одностраничных приложений с сотнями компонентов. Vue 3 также расширяет эту гибкость.

Многослойные внутренние модули

Ядро Vue 3.0 по-прежнему можно использовать с помощью простого тега <script>, но его внутреннее устройство было переписано с нуля в набор разделенных модулей (a collection of decoupled modules). Новая архитектура обеспечивает лучшую поддержку и позволяет конечным пользователям сократить время выполнения до половины за счет tree-shaking.

Эти модули также предоставляют API нижнего уровня, открывающие множество расширенных вариантов использования:

• Компилятор поддерживает настраиваемые преобразования AST для настройки времени сборки (например, i18n время сборки)
• Базовая среда выполнения предоставляет first-class API для создания настраиваемых средств визуализации, нацеленных на различные цели визуализации (например, мобильный телефон, WebGL или терминалы). Средство визуализации DOM по умолчанию создается с использованием того же API.
• Модуль @vue/reactivity экспортирует функции, которые обеспечивают прямой доступ к системе реактивности Vue, и может использоваться как отдельный пакет. Его можно использовать в паре с другими решениями для создания шаблонов (например, lit-html) или даже в сценариях без пользовательского интерфейса.

Новые API для лучшей масштабируемости

Объектно-ориентированный API 2.x практически не затронуто в Vue 3. Однако в версии 3.0 также представлен Composition API — новое API, направленное на устранение проблемных точек использования Vue в крупномасштабных приложениях. Composition API построен на основе API реактивности и обеспечивает лучшую логическую композицию и повторное использование, аналогично hooks в React, более гибкие шаблоны организации кода и более надежный вывод типов, чем API на основе объектов 2.x.

Composition API также можно использовать с Vue 2.x через плагин @vue/composition-api, и уже существуют служебные библиотеки Composition API, которые работают как для Vue 2, так и для 3 (например, vueuse, vue-composable).

Улучшения производительности

Vue 3 продемонстрировал значительные улучшения производительности по сравнению с Vue 2 с точки зрения размера сборки пакетов (до 41% легче с tree-shaking), начальный рендеринг (до 55% быстрее), получение обновлений (до 133% быстрее) и использования памяти ( до 54% меньше).

В Vue 3 мы использовали подход «виртуальной DOM с учетом компилятора» (compiler-informed Virtual DOM): компилятор шаблона выполняет агрессивную оптимизацию и генерирует код функции рендеринга, который поднимает (hoists) статический контент, оставляет подсказки времени выполнения для типов привязки и, что наиболее важно, выравнивает динамические узлы внутри шаблон для снижения стоимости обхода во время выполнения. Таким образом, пользователь получает лучшее из обоих миров: производительность, оптимизированную для компилятора шаблонов или прямое управление с помощью функций ручного рендеринга, когда этого требует вариант использования.

Улучшенная интеграция TypeScript

Кодовая база Vue 3 написана на TypeScript с автоматически сгенерированными, протестированными и объединенными определениями типов, поэтому они всегда актуальны. Composition API отлично работает с поддержкой типов. Vetur, наше официальное расширение VSCode, теперь поддерживает шаблоны и проверку типов, используя улучшенную внутреннюю типизацию Vue 3. Так же в Vue 3 полностью поддерживается TSX.

Экспериментальные возможности

Мы предложили две новые функции для однофайловых компонентов (SFC — Singe-File Components, также известные как файлы .vue):

• <script setup>: синтаксический сахар для использования Composition API внутри SFCs
• <style vars>: state-driven CSS переменные внутри SFCs

Эти функции уже реализованы и доступны в Vue 3.0, но предоставляются только с целью сбора отзывов. Они останутся экспериментальными до тех пор, пока не будут смержены RFC.

Мы также реализовали недокументированный в настоящее время компонент <Suspense>, который позволяет ожидать вложенных асинхронных зависимостей (асинхронные компоненты или компонент с async setup()) при начальном рендеринге. Мы тестируем эту функцию с командой Nuxt.js (Nuxt 3 уже в пути) и, вероятно, закрепим ее в 3.1.

Поэтапный процесс выпуска

Выпуск Vue 3.0 отмечает общую готовность фреймворка. Хотя некоторым из подпроектов фреймворка может потребоваться доработка для достижения стабильного статуса (в частности, интеграция маршрутизатора и Vuex с devtools), мы считаем целесообразным начинать новые проекты с нуля на Vue 3 уже сегодня. Мы также рекомендуем авторам библиотек начать обновление ваших проектов для поддержки Vue 3.

Ознакомьтесь с Vue 3 Libraries Guide для получения подробной информации обо всех подпроектах фреймворка.

Миграция и поддержка IE11

Мы отодвинули сборку миграции (сборка v3 с поведением, совместимым с v2 + предупреждения о миграции) и сборку IE11 из-за ограничений по времени, и планируем сосредоточиться на них в четвертом квартале 2020 года. Поэтому пользователи, планирующие миграцию существующего приложения v2 или требующие поддержки IE11 должна знать об этих ограничениях в настоящее время.

Следующие шаги

В ближайшее время после релиза мы сосредоточимся на:

• Сборка миграции
• Поддержка IE11
• Интерграция Router и Vuex с новым devtools
• Дальнейшие улучшения вывода типа шаблона в Vetur

В настоящее время веб-сайт документации, ветки GitHub и теги npm dist для проектов Vue 3 будут оставаться со статусом next. Это означает, что команда npm install vue по-прежнему будет устанавливать Vue 2.x, а npm install vue@next установит Vue 3. Мы планируем к концу 2020 года переключить все ссылки на документы, ветки и теги dist на 3.0 по умолчанию.

В то же время мы начали планировать выпуск 2.7, который будет последним запланированным выпуском линейки выпусков 2.x. 2.7 будет выполнять обратный перенос совместимых улучшений из версии 3 и выдавать предупреждения об использовании API, которые были удалены/изменены в версии 3, чтобы помочь с потенциальной миграцией. Мы планируем работать над 2.7 в первом квартале 2021 года, который сразу станет LTS после выпуска с 18-месячным сроком поддержки.

Пора попробовать

Чтобы узнать больше о Vue 3.0, посетите наш новый веб-сайт документации. Если вы уже являетесь пользователем Vue 2.x, можете непосредственно перейдите к Migration Guide.