В этом посте мы рассмотрим новые интересные функции, поставляемые с последней версией Vue JS.
Некоторая предыстория
Этот выпуск ожидался давно, Vue CLI 3 исполнилось больше года, и это ядро заняло два долгих года крови и пота с более чем 90 участниками, охватывающими более 2600 коммитов, 628 PR и 30 RFC. Чтобы получить эту новую версию, потребовался большой объем разработки и документации, даже вне основного репозитория. Vue JS по-прежнему остается одной из самых популярных и наиболее часто используемых библиотек JavaScript, команда теперь называет ее прогрессивным фреймворком, потому что с этой версией вы можете видеть, что это фреймворк, который каждый может изучать и постепенно внедрять и получать поддержку на этом пути.
С более чем 1 миллионом пользователей по всему миру (согласно еженедельному отчету об активных пользователях от Vue Devtool) эта новая версия подталкивает планку того, какой должна быть среда JS. Теперь давайте погрузимся в некоторые из новых изменений, которые стоит заметить разработчикам Vue.
Vue Hooks (Composition API) здесь
Таким образом, как и в случае с перехватчиками React, старый объектный API по-прежнему доступен в этой новой версии, и теперь также можно использовать совершенно новый API композиции (который похож на React Hooks). API композиции - это новый способ справиться с организацией кода и избавиться от стресса, связанного с использованием Vue в крупномасштабных приложениях. API композиции отлично подходит для больших приложений, и он поставляется с такой гибкостью, чтобы повторно использовать чистые функции JavaScript в ваших компонентах Vue, что приводит к использованию меньшего количества кода в ваших проектах. API композиции выглядит так:
<script>
export default {
setup() {
return {
average(), range(), median()
}
}
} function average() { }
function range() { }
function median() { }
</script>
Он в основном построен на основе API реактивности для сжатия логики и обеспечения возможности повторного использования. Вы даже можете использовать API композиции в своих проектах Vue 2.x, добавив плагин
Vue add @vue/composition-api
Некоторые API работают как для версии 2, так и для версии 3, например Vueuse и Vue-composabl e.
Совет: Делитесь своими повторно используемыми компонентами между проектами с помощью Bit (Github). Bit упрощает совместное использование, документирование и организацию независимых компонентов любого проекта .
Используйте его для максимального повторного использования кода, совместной работы над независимыми компонентами и создания масштабируемых приложений.
Bit поддерживает Vue, Node, TypeScript, React, Angular и другие.
Многослойные внутренние модули
Как вы знаете, ядро Vue можно использовать с помощью тега сценария в вашем файле разметки, это то же самое в этой новой версии, однако внутренняя часть этого ядра теперь снова записана с нуля в набор независимо разделенных модулей. Это новое переписывание упрощает обслуживание и теперь позволяет разработчикам Vue экономить до половины размера среды выполнения с помощью встряхивания дерева.
Эти модули делают довольно интересные вещи, открывая низкоуровневые API-интерфейсы, чтобы предоставить разработчику доступ к еще большему количеству вариантов использования Vue. Теперь есть основные API среды выполнения, которые вы можете использовать для создания средств визуализации для целей отрисовки, таких как терминалы, собственные мобильные цели и даже WebGL, круто то, что средство визуализации DOM построено с тем же API. Компиляция также теперь поддерживает преобразования абстрактного синтаксического дерева, используемые для достижения настроек во время сборки для таких вещей, как интернационализация. Кроме того, модуль реактивности дает разработчикам Vue доступ к системе реактивности, в этой новой версии он также может использоваться как отдельный пакет. Вы можете сочетать его с решениями без пользовательского интерфейса, Lit-html или другими сервисами по созданию шаблонов.
Быстрее и эффективнее, чем когда-либо
Эта новая версия очень интересна, так как это самая быстрая версия Vue из когда-либо существовавших, она на 55% быстрее, чем любая версия 2.x, и на 41% легче (с раскачиванием дерева). Он показывает большой разрыв в улучшении с обновлениями в версии, на 133% быстрее, чем версия 2, и очень эффективным с точки зрения памяти, потребляя на 54% меньше памяти.
Этот подвиг был достигнут компилятором шаблонов Vue в этой версии, созданным для агрессивной оптимизации, а затем генерации функций рендеринга для сглаживания динамических узлов шаблона, снижая стоимость обхода среды выполнения, предоставляя подсказки во время выполнения для привязки типов и даже поднимая статический контент. Это дает разработчикам Vue как прямой контроль над шаблоном с помощью функций рендеринга, так и оптимизированную производительность компилятора для шаблонов.
Написано на TypeScript
Возможно, вам будет интересно отметить, что кодовая база этой новой версии Vue была написана на TypeScript. Таким образом, в дальнейшем будет актуальная интеграция TypeScript, объединяющая все определения типов. Взаимосвязь между Vue и TypeScript становится еще лучше, поскольку большой Composition API действительно хорошо работает с выводом типов, расширение Vetur в VS Code поддерживает такие вещи, как проверка типов для реквизита, а также полную поддержку ввода TSX, которую вы можете увидеть.
Фрагменты
Как и React, Vue JS теперь представил фрагменты в Vue версии 3, одна из основных потребностей во фрагментах заключается в том, что шаблоны Vue могут иметь только один тег. Таким образом, подобный блок кода в шаблоне Vue вернет ошибку:
<template> <div>Hello</div> <div>World</div> </template>
Первое место, где я увидел эту идею, было в React 16, фрагменты - это теги-оболочки шаблона, которые используются для структурирования вашего HTML-кода, но не изменяют семантику. Как тег Div, но на этот раз без какого-либо влияния на DOM. С фрагментами функции ручного рендеринга могут просто возвращать массивы, и это работает так же, как и в React.
Телепорт
Телепорты, которые ранее назывались порталами, являются безопасными каналами для рендеринга дочерних узлов в узлы DOM вне линии DOM, например, для всплывающих окон и даже модальных окон. Раньше с этим обычно с большим трудом справлялись в CSS, теперь Vue позволяет вам использовать ‹Teleport› для этого в разделе вашего шаблона. Я считаю, что телепорт был вдохновлен порталами React, и он поставляется с этой новой версией Vue JS.
Новые документы
Эта новая версия поставляется с новой документацией, которая выглядит круче, шрифты немного изменены, а затем информация выделена синим цветом. Еще одна новая вещь, которую я заметил в пользовательском интерфейсе, - это панель поиска, у нее стиль наведения, который не такой унылый, как старые документы. Документация также теперь включает информацию о переходе со старой версии на версию 3.
Что дальше?
Эта новая версия является стабильной, и команда Vue призывает вас идти вперед и начать создавать с ее помощью новые интересные вещи. Другие подпроекты Vue, такие как интеграция VueX и Devtools, все еще находятся в разработке. Некоторые экспериментальные функции также доступны сегодня для использования с основной целью получения отзывов. Так что, если вы готовы к этому, ознакомьтесь с этими ссылками:
<script setup>: синтаксический сахар для использования Composition API внутри SFC<style vars>: переменные CSS, управляемые состоянием, внутри SFC
Поэкспериментируйте с функциями и оставьте свой отзыв, поскольку команде Vue он нужен, чтобы объединить и сделать их стабильными.
Заключение
Этот пост представляет собой обзор всего, что меня радует в новой версии Vue. Когда бы ты ни бежал
npm install Vue
В вашем терминале с настоящего момента до конца 2020 года вы получите Vue 2, поэтому для установки версии 3 используйте следующий код:
npm install vue@next
Дайте мне знать, что вам больше всего нравится в этой новой версии Vue, и что вы думаете о внедрении API композиции.
