Vue 3 уже здесь, и все с нетерпением ждут возможности как можно скорее наверстать упущенное.

Vue JS - лучший фреймворк на стороне клиента! Он увеличил размер пакета и производительность под капотом, что сделало эту новую версию привлекательной для разработчиков.

В чем подвох? Некоторые критические изменения, устаревание и новый синтаксис могут немного усложнить ваш план миграции, чем ожидалось. Давайте погрузимся и посмотрим, чего вам следует ожидать.

В этой статье мы рассмотрим, как вы можете обновить приложение Vue.js 2 до Vue 3, и какие важные изменения вам следует ожидать в Vue 3.

Как перейти с Vue 2 на Vue 3

Предположим, что у вас есть обычный проект Vue.js. У вас также будет файл main.js, в который вы импортируете маршрутизатор Vue и конфигурацию Vuex и установите для нее экземпляр Vue.

Использование CLI

Теперь, чтобы обновить проект Vue.js 2 до проекта Vue.js 3, вы можете просто добавить официальный интерфейс командной строки для проектов Vue, плагин Vue-next. Помимо инструментов развертывания и разработки, он упрощает обновление до однострочной команды:

Этот плагин обновляет и устанавливает новые зависимости для Vue Router, Vue и Vuex. Он также изменяет код, чтобы он был совместим с версией Vue 3.

Поэтому становится важным создать резервную копию вашего проекта с самого начала.

Установка зависимостей

При установке плагина пакеты @ vue / test-utils, eslint-plugin-vue, vue-router, vuex и vue обновляются до новой версии. Кроме того, среди зависимостей разработки появляется новый пакет с именем @ vue / compiler-sfc.

Это помогает в компиляции новых однофайловых компонентов Vue в исполняемый код Javascript. Теперь вы можете использовать панель управления исходным кодом, чтобы увидеть и сравнить все изменения.

Сравнение кода

Первое, что вы заметите, это то, что способ создания и настройки вашего приложения изменился. Выглядит и работает намного лучше, чем раньше.

То же самое для маршрутизатора Vue. Если вы посмотрите на файл конфигурации, новый VueRouter станет вызовом createRouter, и необходимо оставить глобальную настройку плагина. Вместо этого вы будете использовать некоторые функции из этой библиотеки.

То же самое и с Vuex Store. Вы можете использовать новую функцию «createStore», чтобы создать новый экземпляр и установить конфигурацию магазина.

Критические изменения, которые вы увидите в Vue 3

Вышеупомянутые модификации выполняются автоматически Vue CLI.

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

Фильтры Vue и Eventbus устарели в новой версии. EventBus присутствовал при разработке Vue всякий раз, когда вы сталкивались с ситуацией, когда вам нужно было сделать ярлык для передачи событий от дочернего элемента к родительскому или наоборот. В то время как фильтры были там, чтобы помочь вам "отформатировать" ваше значение, например: для короткого URL-адреса, добавления валюты, верхнего регистра и т. Д.

В сложных случаях вам понадобятся эксперты, чтобы внести необходимые изменения в код вашего приложения и провести рефакторинг обоих.

Вы должны ожидать более удобную в обслуживании, меньшую и более быструю версию с новыми функциями. Большинство из них являются дополнениями и улучшениями существующего API.

Composition API

Composition API до сих пор является самой большой функцией Vue 3, которая предоставляет альтернативный синтаксис для использования TypeScript, повторного использования кода в компонентах и ​​написания более крупных компонентов.

Это альтернативный синтаксис, а не новый способ кодирования компонентов в Vue 3. Вы можете использовать его по трем причинам, указанным выше.

Еще одна хорошая вещь заключается в том, что существующий API параметров не является устаревшим. Все предназначено для обработки сложных вариантов использования и в основном замены использования миксинов, что, по общему признанию, вызвало множество проблем в крупномасштабных приложениях.

Монтаж

Как мы упоминали ранее, первое, что вы заметите, - это разница в инициализации вашего приложения. В Vue 2 вы используете конструктор Vue с методом $ mount и такой функцией рендеринга:

В Vue 3 вы найдете более элегантный синтаксис

Фрагменты

В Vue 2 многокорневые компоненты не поддерживались. Решение заключалось в том, чтобы заключить ваш код в элемент-оболочку.

В Vue 3 компоненты теперь могут иметь несколько корневых узлов. Это исключает использование элементов оболочки и позволяет писать более чистую разметку.

Телепорт

Установка части вашего компонента в другую позицию в DOM, отличную от иерархии компонентов Vue, рассматривается как трудная для решения ситуация.

Функция телепортации помогает создать компонент, включающий полноэкранный модальный экран. В большинстве случаев вам нужно, чтобы логика модального окна находилась внутри компонента, но либо она начинает требовать изменения в составе компонентов, либо позиционирование модального окна быстро становится трудно решить с помощью CSS.

Вы по-прежнему можете взаимодействовать и передавать ему реквизиты, как будто находясь внутри компонента!

Заключение

Если вы хотите, чтобы ваше приложение Vue.js стало быстрее, меньше и удобнее в обслуживании, вам следует перейти на Vue 3 с более простым подходом к таргетингу на нативные.

Если вы хотите дождаться выпуска Vue.js Migration Build для всего процесса обновления, вы все равно можете использовать Vue.js 2, поскольку он стабилен и работает с любой сторонней библиотекой или инструментом.

Если вы планируете миграцию, мы рекомендуем вам нанять экспертов, которые могут помочь вам с правильным планом миграции и последующим процессом разработки, особенно в связи с тем, что вспомогательные библиотеки все еще обновляются.

Свяжитесь с нами для вашего нового проекта пользовательского или одностраничного приложения Vue.JS.

О Galaxy Weblinks

Мы специализируемся на предоставлении услуг сквозной разработки программного обеспечения Vue.js, помимо других популярных JS-фреймворков. Наша команда опытных и преданных своему делу разработчиков Vue.JS предоставляет начальную консультацию, план миграции и окончательную разработку и поддержку веб-приложений Vue.JS. Мы предоставляем мощные интерфейсы, приложения реального времени и одностраничные приложения (SPA) с своевременной доставкой с помощью гибкого подхода и подхода DevOps.

Первоначально опубликовано на https://blog.galaxyweblinks.com 26 октября 2020 г.