Pull to refresh

Вышел Vue.js 3.0 «One piece»

Website development *JavaScript *VueJS *
Translation
Original author: Evan You

Название - это отсылка к манге "One piece" про парня, который хочет стать пиратским королем, прим. перев.

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

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

Развитие концепции "Прогрессивного фреймворка"

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

Сегодня Vue используют более 1,3 миллиона пользователей (это число основано на количестве активных пользователей за неделю у расширения Chrome Vue Devtools в соответствии со статистикой Google) (я так и не понял, включает ли это число пользователей расширения для firefox, прим. перев.) и мы видим, что Vue используется в самых разнообразных сценариях, от добавления интерактивности на "традиционные" страницы, генерируемые на сервере, до полноценных одностраничных приложений с сотнями компонентов. Vue 3 расширяет эту гибкость.

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

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

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

  • Компилятор поддерживает трансформацию абстрактного синтаксического дерева (AST) в процессе сборки, например для интернационализации

  • Ядро предоставляет первоклассное API для создания своих визуализаторов, для рендеринга не только в браузере, но и, например, на мобильных устройствах, в контексте WebGL или в консоли. Базовый DOM-визуализатор использует этот же API

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

Новые API для крупных приложений

Объектный API версии 2.x практически полностью поддерживается в Vue 3. Однако в версии 3.0 также представлен Composition API - новый набор API, направленных на устранение проблем при использовании Vue в крупномасштабных приложениях. Composition API построен на основе ранее упоминавшегося API реактивности. Он обеспечивает логическую связность и возможность повторного использования, похожую на хуки 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, как лучше перевести - не знаю, прим. перев.): компилятор шаблона выполняет агрессивную оптимизацию и генерирует код рендер-функции, который отделяет статический контент, оставляет подсказки для определения типов и, что наиболее важно, выравнивает (flatten, прим. перев.) динамические узлы внутри шаблона для снижения стоимости обхода дерева документа во время выполнения. Таким образом пользователь получает лучшее из обоих миров: оптимизированную компилятором производительность при использовании шаблонов или непосредственное управление рендерингом с помощью рендер-функции, если нужно.

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

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

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

Предлагаем вам две новые функции для однофайловых компонентов (SFC, также известные как файлы .vue):

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

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

Постепенный выпуск

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

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

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

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

Дальнейшие шаги

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

  • Сборка для миграции

  • Поддержка IE11

  • Интеграция Router и Vuex в новые инструменты разработчика

  • Дальнейшие улучшения вывода типов в шаблонах в Vetur

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

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

Попробовать

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

Tags:
Hubs:
Total votes 25: ↑24 and ↓1 +23
Views 31K
Comments Comments 94