VueJS 3.0.0 Beta: функции, от которых я в восторге

Интересные вещи в новой бета-версии Vue 3.0.0 и ее история.

На момент написания этой статьи VueJS 3.0.0 сейчас находится в бета-версии, в этой статье мы рассмотрим краткий обзор «Пути к большому выпуску», представленный командой Vue на последней онлайн-встрече ThisDot.

Vue JS

Vue JS - очень популярная и прогрессивная библиотека JavaScript, созданная Эваном Ю и более чем 284 членами сообщества Vue. У него более 1,2 миллиона пользователей, и он состоит из доступной базовой библиотеки, которая фокусируется только на уровне представления, и экосистемы вспомогательных библиотек, которая помогает решать сложные задачи в больших одностраничных приложениях.

Эко-система

Удивительно видеть, насколько обширной стала экосистема Vue. Одна из вещей, которые меня особенно взволновали, - это недавний выпуск Bit.dev с поддержкой VueJS. Итак, теперь, наконец, разработчики Vue могут публиковать, документировать и организовывать повторно используемые компоненты в концентраторе облачных компонентов (точно так же, как разработчики React). Каждая новая библиотека или инструмент VueJS, который выходит, усиливает эту замечательную структуру, но некоторые из них более эффективны, чем другие (отсутствие свободы публиковать компоненты из любой кодовой базы является препятствием для многих разработчиков).

Встреча в этой точке

Во время этого периода пандемии 16 апреля в сети была проведена встреча ThisDot, на которой основная команда показала, что будет в будущем с Vue JS, и это то, что мы кратко изложим в этом посте.

Представление

Эта новая версия Vue JS создана для скорости, существует значительный скачок скорости между версией 3.0 и предыдущими версиями Vue. Он имеет до 2 раз лучшую производительность обновления и до 3 раз быстрее для рендеринга на стороне сервера. Инициализация компонентов теперь более эффективна, даже с учетом быстрых путей к выполнению с учетом информации о компиляторе. Виртуальная модель DOM также была полностью переписана, и эта новая версия будет работать быстрее, чем когда-либо.

Поддержка деревьев

В этой версии теперь также доступна поддержка таких вещей, как встряхивание дерева. Большинство функций, которые были необязательными в Vue, теперь могут быть древовидными, например, переходы и v-модель. Это резко уменьшило размер приложений Vue, размер файла HelloWorld без костей теперь составляет 13,5 КБ, а с поддержкой API композиции он может уменьшиться до 11,75 КБ. Со всеми включенными функциями времени выполнения проект может весить всего 22,5 КБ. Это означает, что даже с добавлением гораздо большего количества функций, Vue 3.0 все равно легче любой версии 2.x.

Composition API

Команда Vue представила новый способ работы с организацией кода, изначально в версиях 2.x мы использовали опции. Параметры хороши, но у него есть недостатки компилятора при попытке сопоставить или получить доступ к логике Vue, а также иметь дело с этим в JavaScript. Таким образом, API композиции - лучшее решение для их обработки, и он также дает свободу и гибкость для использования и повторного использования чистых JS-функций в ваших компонентах Vue, что приведет к использованию меньшего количества строк кода полностью. API композиции выглядит так:

<script>
export default {
         setup() {
           return {
             average(), range(), median()
           }
         }
       } 
function average() { } 
function range() { } 
function median() { }
</script>

Мы теряем теперь API опций? Нет, скорее API композиции будет использоваться вместе с API параметров. (Это очень напоминает мне хуки React)

Фрагменты

Как и React, Vue JS представит фрагменты в Vue версии 3.0.0, одна из основных потребностей во фрагментах заключается в том, что шаблоны Vue могут иметь только один тег. Таким образом, подобный блок кода в шаблоне Vue вернет ошибку:

<template>   
 <div>Hello</div>   
 <div>World</div>   
</template>

Первое место, где я увидел реализацию этой идеи, было в React 16, фрагменты - это теги-оболочки шаблона, которые используются для структурирования вашего HTML-кода, но не изменяют семантику. Как тег Div, но на этот раз без какого-либо влияния на DOM. С фрагментами функции ручного рендеринга могут просто возвращать массивы, и это работает так же, как и в React.

Телепорт

Телепорты, которые ранее назывались порталами, являются безопасными каналами для рендеринга дочерних узлов в узлы DOM вне линии DOM, например, для всплывающих окон и даже модальных окон. Раньше с этим обычно с большим трудом справлялись в CSS, теперь Vue позволяет вам использовать ‹Teleport› для этого в разделе вашего шаблона. Я считаю, что телепорт был вдохновлен порталами React, и он будет поставляться с версией 3.0.0 Vue JS.

Саспенс

Suspense - это компонент, необходимый во время ленивой загрузки, в основном используемый для обертывания ленивых компонентов. Компонент Suspense может содержать несколько ленивых компонентов. В версии 3.0.0 Vue JS будет введена приостановка ожидания вложенных асинхронных зависимостей во вложенном дереве, и это будет хорошо работать с асинхронными компонентами.

Лучшая поддержка TypeScript

Vue начал поддерживать TypeScript с версий 2.x, а для версии 3.0.0 продолжает это делать. Таким образом, создание новых проектов с использованием текущей последней версии TypeScript станет возможным с Vue 3.0.0 с поддержкой TSX и без большой разницы между TS, кодом JS и API. Компонент класса по-прежнему поддерживается (vue-class-component @ next в настоящее время находится в альфа-версии)

Версия 3.0.0 Отчет о состоянии

Первоначальные планы официального выпуска версии 3.0.0 Vue JS были намечены на первый квартал 2020 года в соответствии с графиком проекта на GitHub. Начиная с 16 апреля 2020 года версия Vue 3.0.0 находится в стадии бета-тестирования! Это означает, что все запланированные запросы на комментарии были проработаны и реализованы, и теперь команда сосредоточена на интеграции библиотек. Теперь доступна экспериментальная поддержка Vue CLI здесь и очень простая поддержка компонентов с одним файлом, основанная на Webpack здесь.

Еще один релиз

Vue версии 2.7, которая является второстепенным выпуском, скоро выйдет и, вероятно, будет последней версией в серии 2.x перед официальным выпуском версии 3.0.0. Он будет поддерживать улучшения совместимости с портами из версии 3.0.0 и показывать предупреждения об устаревании для функций, которых не было в 3.0.0.

Хочу поддержать…

Шансы невелики, но вы можете столкнуться с несоответствиями с версиями 2.x, и вам нужно проверить, было ли исправление этой проблемы уже предложено в RFC, и если это не так, откройте проблему. Не забудьте прочитать помощника по выпуску, чтобы помочь вам открывать новые выпуски.

Заключение

Это обзор функций, поставляемых с третьей версией Vue JS. Команда Vue позаботилась о том, чтобы эта версия стала самым быстрым фреймворком на рынке. Вы можете просмотреть слайды онлайн-встречи ThisDot здесь, будьте в безопасности и наслаждайтесь взломом. Какая ваша любимая новая функция?

Учить больше