Путь Vue от библиотеки javascript до фреймворка впечатляет, особенно если учесть, как он по-прежнему сохраняет свою легкость. Есть несколько функций, которые предлагает Vue3, в том числе Pinia, которая упрощает управление состоянием, а также набор инструментов для сборки, который работает на Vite. Если вы хотите обновить свои приложения до Vue3 или просто хотите поэкспериментировать с фреймворком, мы собрали здесь все, что вам нужно знать о Vue3!
Что такое Vue3?
Прежде чем мы перейдем к изменениям, которые вы увидите в Vue3, давайте сначала посмотрим, что такое Vue.js и его основные компоненты:
Вью
Vue.js - это интерфейсный JavaScript-фреймворк с открытым исходным кодом, который можно использовать для создания пользовательских интерфейсов. Платформа предлагает декларативный и основанный на компонентах подход к кодированию, который способствует быстрой разработке пользовательских дисплеев. Его можно использовать для разработки простых или сложных интерфейсов, и он построен на основе стандартных отраслевых HTML, CSS и JavaScript. Причинами популярности Vue.js и большой пользовательской базы Vue.js является его удобный для программиста синтаксис, простота использования и четко определенная документация.
Как упоминалось выше, Vue.js построен на двух основных характеристиках:
Декларативное отображение позволяет пользователю декларативно определять вывод HTML в зависимости от состояния JavaScript. Vue.js расширяет обычный HTML с помощью синтаксиса шаблона.
Реактивность - Vue.js активно отслеживает состояние JavaScript и при его изменении быстро обновляет DOM.
Vue3.0
Инженерам, использующим Vue 2 для написания кода, теперь необходимо обновиться до Vue3. Это связано с тем, что у него есть новые возможности, которые значительно упрощают разработку удобочитаемых, согласованных компонентов и улучшают методы организации наших приложений. Vue3 удобнее, короче и проще в обслуживании. Некоторые из примечательных особенностей Vue3 - телепорт, фрагменты и несколько v-моделей.
Последняя версия также избавилась от фильтров и имеет управляемые состоянием переменные CSS, а также экспериментальную функцию приостановки. Он также имеет модификации именования жизненного цикла и изменения компонентов отдельных файлов.
Был ли выпущен Vue3?
Последняя доступная версия Vue - Vue3 — была первоначально анонсирована в середине 2018 года и официально выпущена в сентябре 2020 года. 7 февраля 2022 года Vue3.0 была объявлена официальной версией прогрессивного фреймворка JavaScript по умолчанию.
Что нового в Vue3?
Самые интересные изменения, которых стоит ожидать в Vue3:
Обеспечить/ввести
Vue 2 позволял пользователям передавать данные, такие как строки, массивы, объекты и многое другое, через реквизиты в коде. Такие данные могут быть легко переданы от родительского элемента к его дочерним элементам. Однако использование реквизита усложнило отправку данных из родительского элемента в глубоко вложенный дочерний элемент. В результате разработчикам пришлось использовать Vuex Store и Event Hub. Vue 2.2.0 также включает в себя предоставление/внедрение, но его не рекомендуется использовать в общем программном коде.
Однако, используя улучшенную комбинацию предоставления/вставки в Vue3, мы можем передавать данные быстрее и аккуратнее. Как следует из названия, мы используем, чтобы сделать данные доступными из родительского элемента для любого из его дочерних компонентов, независимо от того, насколько глубоко вложены эти дочерние элементы. Здесь мы можем использовать предоставление как объекты или как функции.
Телепорт
В зависимости от логики приложения, которое вы хотите создать, ваши компоненты могут отображаться в местах, отличных от того, где вы хотите их отображать. Например, вы можете создать всплывающее окно, которое должно отображаться и занимать весь экран. Чтобы преодолеть это, мы можем использовать атрибут position таких компонентов в CSS, но с Vue3 разработчики также могут использовать Teleport.
Телепорт позволяет программистам взять элемент из его исходного контейнера, в который он был упакован, и переместить его в любой уже существующий компонент на странице, где он используется. Например, вы можете переместить элемент заголовка из div #app в заголовок. Помните, что вы можете использовать Teleport только для перемещения элементов в компоненты кода, которые существуют за пределами Vue DOM.
Фрагменты
В Vue 2 трудно иметь несколько корневых компонентов в шаблоне файла. Программисты начали заключать все компоненты в родительский компонент в качестве решения для одного и того же. Иногда программистам может потребоваться визуализировать элемент без контейнера, обернутого вокруг него. Теперь инженеры могут иметь множество элементов в своем корневом файле шаблона благодаря Fragments, функции, добавленной в Vue3.
Глобальный Vue-API
Вы могли часто находить Vue.component или Vue.use в файле main.js приложения Vue. Они называются глобальными API , и в Vue 2 есть много таких методов. Здесь, если у вас есть несколько экземпляров вашего приложения, все они размещаются поверх Vue. Трудно ограничить конкретную функциональность одним экземпляром приложения.
Vue3 решает эту проблему, вводя новый глобальный API под названием createApp. С помощью этого метода вы можете получить новый экземпляр приложения Vue. Все API-интерфейсы, связанные с Vue 2.x, будут перенесены в отдельные экземпляры приложений. Это позволяет каждому экземпляру вашего приложения иметь эксклюзивные функции, не нарушая работу других экземпляров, которые уже используются.
API событий
Помимо использования Vuex Store, использование шины событий является одним из самых популярных методов, используемых программистами для передачи данных между элементами, которые не имеют общего родительско-дочернего контекста. Однако такие коды, как $on, $off и $once, были удалены в Vue3. Но $emit по-прежнему доступен, поскольку дочерние элементы должны передавать события своим родительским элементам. Решением этой проблемы было бы использование Provide/Inject.
Набор инструментов для сборки на базе Vite
Разработанный Эваном Ю, создателем Vue, Vite представляет собой первоклассную цепочку инструментов поддержки Vue SFC, легкую и быструю в создании. Vite теперь является двигателем стандартной конфигурации сборки Vue3. Сборщик модулей @vue-cli/service , созданный поверх webpack, будет оборачивать все ваше приложение Vue при запуске, горячей перезагрузке и компиляции. Vite, с другой стороны, возьмет синтаксис импорта ES из кода вашей программы и позволит браузеру анализировать каждый импорт перед отправкой HTTP-запроса.
Изменения вносятся в первую очередь из соображений скорости. Сервер запускается немедленно, поскольку он использует встроенную поддержку браузером компонентов JavaScript и работает намного быстрее.
Синтаксис API композиции
API параметров использовался для создания состояний элементов и логики. Composition API был запущен Vue3 в качестве замены. Это просто набор API-интерфейсов, который позволяет нам создавать элементы Vue без определения параметров с использованием импортированных методов.
Composition API содержит следующие API:
API реактивности - например, ref() и reactive(). Он может напрямую создавать реактивное состояние, вычисляемое состояние и наблюдателей, используя это.
Крючки жизненного цикла - например, onMounted() и onUnmounted(). Мы можем подключиться к жизненному циклу элемента, используя хуки жизненного цикла.
Внедрение зависимостей - например, обеспечить() и ввести(). Использование системы внедрения зависимостей Vue с API-интерфейсами Reactivity стало возможным благодаря внедрению зависимостей.
Плюсы использования составных API
Основные преимущества использования Composition API по сравнению с Options API:
- Элемент больше не нужен с Vue3 для создания реактивного состояния.
- При добавлении множества реактивных атрибутов настройка элементов Vue.js может раздуться. Из-за этого может быть полезно абстрагировать эти реактивные переменные в отдельные файлы javascript.
- Основное преимущество Composition API заключается в том, что он позволяет повторно использовать четкую и эффективную логику в форме компонуемых методов. Он решает все проблемы с примесями, основным методом повторного использования логики в API параметров.
- Вы можете вводить код в Composition API с полным выводом типа.
- Программы, которые вы пишете в Composition API, более эффективны, а имена переменных можно сделать меньше. Это снижает накладные расходы.
- Вы можете лучше делиться своим программным кодом с Composition API.
Пиния
Pinia - это легкий инструмент управления состоянием для Vue.js. Это позволяет нам делиться состоянием между элементами и страницами. Он создает удобную, полностью типизированную структуру управления состоянием, используя новую концепцию реактивности в Vue3. Теперь это новая стандартная библиотека управления состоянием Vue3.
Первоначально Pinia служила для изучения потенциала Vuex. В течение долгого времени Vuex был рекомендуемой системой управления состоянием для Vue, но с Vue3 Pinia является рекомендуемой системой для управления состояниями в официальной документации. В настоящее время Vuex находится в режиме обслуживания. Хотя он продолжает функционировать, новых функций добавляться не будет. Для свежих приложений рекомендуется использовать Pinia.
Почему Пиния?
Pinia очень легкая, весит всего 1 КБ. Кроме того, он интегрируется с инструментами разработки Vue.js, чтобы улучшить ваш опыт кодирования в Vue 2 и Vue3. Поскольку Pinia выводит все ваши типы данных, она также может предложить вам полное и точное автозаполнение в javascript. Pinia также имеет модульную конструкцию, удобна для пользователя и расширяема. В целом, Pinia выглядит легкой, несложной и простой. Он очень похож на работу с элементами и содержит все инструменты, необходимые для динамического программирования в Vue3.
Будет ли Vue 2 устаревшим?
Последним незначительным обновлением для Vue 2 был Vue 2.7, выпущенный в июле 2022 года. В настоящее время Vue 2 находится в режиме обслуживания. Хотя никаких дополнительных функций поставляться не будет, в течение 18 месяцев будут исправлены важные ошибки и исправления для системы безопасности. К концу 2023 года поддержка Vue 2 будет прекращена.
Миграция с Vue 2
В зависимости от вашего программного обеспечения переход на Vue3 может не иметь смысла, если вы работаете над очень большим проектом с использованием Vue 2. Используйте Vue3, если проблемы с эффективностью сохраняются, несмотря на все ваши усилия по оптимизации.
Хотите ли вы перенести свое приложение на Vue3 или нет, зависит от его размера и сложности. Большинство синтаксиса и методов в Vue 2 такие же, как и в Vue3. Однако, если вы хотите использовать некоторые из упомянутых выше изменений, лучше всего будет выполнить миграцию.
Vue.js в проекте AppMaster
Платформа AppMaster использует фреймворк VueJS, а точнее третью версию фреймворка, для создания фронтенд-приложения для наших пользователей. Vue 3 используется для создания админки, панелей и клиентских порталов, и весь интерфейс студии AppMaster на самом деле тоже сделан с использованием фреймворка VueJS.
Мы используем специальный подход, называемый микро-интерфейсами или интерфейсными микросервисами, чтобы иметь возможность быстро и эффективно развивать наш продукт; например, каждый редактор модели данных и редактор бизнес-процессов — это совершенно отдельное клиентское приложение на нашей платформе. Это позволяет нам развиваться очень быстро и независимо с точки зрения команды разработчиков, что увеличивает общую скорость нашего продукта. Все эти преимущества наши клиенты могут получить, используя наши приложения.
В дальнейшем, помимо режима одностраничного приложения SPA, мы добавим режим SSR (server-side rendering), который позволит нашим клиентам создавать не только админ-панели и настраиваемые порталы, но и полнофункциональные веб-сайты с очень высокая SEO-оптимизация.
О безкоде
Одним из ключевых элементов, влияющих на демократизацию кодирования, является подход к разработке без кода . В настоящее время большее количество людей может получить доступ к программированию вообще без программирования. Это упрощает веб-дизайн, разработку мобильных приложений и адаптивную веб-разработку.
AppMaster входит в число приложений, которые можно использовать для автоматического создания исходного кода. Вы можете просмотреть и проверить код в любой момент. С AppMaster у вас есть возможность настроить информацию о проекте с помощью компьютерного языка. Мы также позволяем людям экспортировать код, если они этого хотят. Это гарантия того, что у вас есть полный контроль и право собственности на приложение, над которым вы работаете с помощью AppMaster.
Выводы
Если вам нужно более подробное объяснение того, чем Vue3 отличается от Vue 2, а также фрагменты кода, вы можете просмотреть официальную документацию Vue.js. Мы упомянули большинство основных изменений, о которых вам следует знать. Важно, чтобы вы были в курсе обновлений Vue3, если вы заинтересованы в создании приложений с помощью этой платформы.
