Введение

Меня зовут Ор Перлман, я технический руководитель мобильного подразделения Zeals.
Мы — SaaS-компания, базирующаяся в Токио, целью которой является предоставление возможностей чат-ботов через b2c.

В моей карьере последние 14 с лишним лет я работаю программистом и веб-инженером (вы можете найти меня в LinkedIn).

Изо дня в день, помимо моих обязанностей технического руководителя, я также являюсь фронтенд-лидером своей команды.

Те из вас, кто не знаком с этой серией, могут вернуться к части 1 (ссылка ниже) и прочитать об истории этой серии и о том, как мы решили использовать Vue.

В команде по мобильности мы в настоящее время используем Vue для создания нашей системы CRM для бизнес-членов и клиентов.

В этой статье я хотел бы осветить несколько целей:

  • Вы настроили свою среду в Vue2 с помощью Vue-CLI.
  • Кратко рассмотрим основы создания компонентов в Vue2.
  • Объясните, что такое Composition-API и как его использовать.
  • Преобразуйте сгенерированный код проекта из Options-API в Composition-API.

Разбивка серии

  • Почему новый фреймворк?: предыстория того, почему мы решили использовать новый фреймворк и почему этот фреймворк — Vue.
  • Начало работы:о том, как начать работу с Vue2 и как мы можем преобразовать наш компонент API параметров в API композиции.
  • Форма входа. Мы перейдем к преобразованию нашего простого компонента в форму входа, продолжая использовать Composition API и добавляя Pinia (управление состоянием).
  • Тестирование. Мы расскажем, как добавить проверки с помощью VeeValidate и модульное тестирование с помощью Jest.
  • Что дальше: резюме и взгляд на будущее (Настройка сценария).

На момент написания этой статьи разделы выше могли измениться (сократиться или увеличиться, в зависимости от объема информации в каждой части).

Введение

Если вы впервые обращаетесь к Vue, вы можете обратиться к замечательной документации от основной команды Vue, пройти несколько учебников или посмотреть несколько курсов на YouTube, чтобы начать работу (несмотря на то, что требуется подписка, я могу рекомендую этот замечательный курс Сары Драснер с сайта frontendmasters).

Как следует из названия статьи, в этой статье мы сосредоточимся на Vue2.

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

Предпосылки

  1. Вы использовали какой-то интерфейсный фреймворк в прошлом или, по крайней мере, знакомы с концепциями, лежащими в их основе.
  2. Вы слышали о Vue и, по крайней мере, знакомы с тем, что он должен представлять.
  3. У вас установлен NodeJS (моя текущая локальная версия — v14.17.6).
  4. У вас глобально установлена ​​Yarn V1.
  5. Вы используете VSCode.

(Необязательно) Могут быть случаи, когда я буду ссылаться на команды, связанные с ОС. Для своей среды разработки я использую Ubuntu с WSL2 в Windows, но вы можете поискать альтернативные команды в своем любимом дистрибутиве.

Наш проект

Чтобы быстро приступить к работе, мы будем использовать замечательный пакет Vue-CLI для создания нашего базового проекта (для тех, кто пришел из React, это в некотором роде похоже на проект create-react-app).

Запустите yarn global add @vue/cli со своего терминала, чтобы установить Vue-CLI в вашей среде.

Выберите место, где вы хотели бы создать свой проект, и запустите vue create vue2-the-vue3-way.

CLI представит вам меню с несколькими вариантами выбора.
Поскольку в этой статье мы сосредоточимся не на Vue CLI, мы будем использовать настройку Vue2 по умолчанию (Документация Vue-CLI более подробно описывает каждый параметр).

Как только CLI завершит создание проекта, мы перенаправим наш терминал, чтобы он указывал на наш вновь созданный проект, выполнив команду cd vue2-the-vue3-way.

Наш проект не создается с поддержкой Typescript по умолчанию (это вариант, если мы выбрали настройку создания нашего проекта CLI), поэтому вместо этого мы добавим его, запустив vue add typescript.

Когда интерфейс командной строки предложит ответить на некоторые вопросы, воспользуйтесь приведенными ниже ответами.

Наконец, чтобы убедиться, что проект работает правильно, мы можем запустить yarn serve .

Прежде чем мы углубимся в суть статьи о подходе Vue3 (Composition-API), я хотел бы рассказать о некоторых концепциях Vue2, чтобы вы лучше поняли, какие подходы используются в Vue2 и как они используются. изменение в Vue3.

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

Vue2: директивы

Для тех, кто перешел с Angular, Директивы во Vue будут очень знакомы. Чтобы цитировать Эвана Ю, я подумал, что, если бы я мог просто извлечь ту часть, которая мне действительно понравилась в Angular, и создать что-то действительно легкое.

Директивы можно рассматривать как действия/методы, которые можно вызывать из шаблона, будь то скрытие/неотрисовка свойства (v-show, v-if), определение двусторонней привязки для свойства (v-model) или цикл по данным (v-for).

Vue2: Компонент API/класса параметров

API опций

API параметров — это синтаксис по умолчанию в Vue2 для создания компонента.
Синтаксис считается простым благодаря разделению различных разделов компонента на функции.

  • Данные: раздел для определения данных, которые будут использоваться совместно с шаблоном (представлением).
  • Props: раздел для определения свойств, которые отображаются при желании внедрить компонент в другой компонент.
  • Вычислительный: это концепция, которая представляет собой нечто большее, чем однострочный (у Vue даже есть собственная документация для нее), но если попытаться обобщить ее, мы можем придумать вариант, который Vue предоставляет нам для кэширования определенных операций (для тех, кто переходит с Angular, вы можете думать об этом как о кешированной версии каналов. Для тех, кто использует управление состоянием, вы можете попытаться думать об этом как о чем-то подобном к селекторам/геттерам).
  • Методы: раздел для определения методов, которые мы будем вызывать из нашего шаблона.
  • Следить: раздел для определения свойств, которые можно отслеживать (какое значение было раньше и что изменилось).

В следующем примере кода я взял компонент HelloWorld по умолчанию (вы можете найти его в каталоге вашего проекта в src/components/HelloWorld.vue) и изменил его, чтобы он соответствовал следующим критериям:

  1. Компонент должен иметь возможность получать имя при вызове из отдельного компонента (использование реквизита).
  2. Компонент по умолчанию покажет приветственное сообщение (использование данных).
  3. Пользователь может обновить приветственное сообщение (отслеживание использования).
  4. Пользовательский ввод с клавиатуры должен быть зарегистрирован в консоли браузера (использование методов).

Компоненты класса

Подход Компонент класса — это проект, созданный сообществом, чтобы предложить альтернативный синтаксис API параметров, который использует более объектно-ориентированный подход с поддержкой Typescript (для тех, кто перешел из Angular, синтаксис почти идентичен с использованием декораторов и синтаксис ES6).

Хотя это и не официальный пакет от основной команды (вы не найдете никакой документации о нем на официальном сайте Vue), он был признан и рекомендован основной командой, и даже включен в качестве опции в Vue-CLI.

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

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

Vue2: Плагины

Прежде чем перейти к обсуждению Composition-API, стоит рассмотреть еще одну концепцию — плагины.

Плагины — это концепция Vue2, представляющая глобальную (одноэлементную) функцию, которую может использовать каждый отдельный компонент.

Vue2 поставляется с предустановленными плагинами в виде Свойства экземпляра и Методы экземпляра.

Внешние библиотеки в большинстве случаев также используются в качестве плагинов.
Например, Vue Router ($router/$route) или Vue i18n ($t).

Вы можете получить доступ к подключаемым модулям непосредственно из компонента с помощью ключевого слова this.
Доступ к подключаемым модулям также можно получить непосредственно из шаблона путем прямой ссылки на них (например, $refили $t ).

Vue3: композиция-API/реактивность

Vue3 был официально объявлен 18 сентября 2020 года.

Хотя он представляет множество функций/улучшений, я хотел бы сосредоточиться на новом синтаксисе Composition-API для создания компонентов и реактивности.

Если вам интересно, почему API параметров был заменен новым синтаксисом, RFC для Composition-API — это хорошее место, где можно подробно ознакомиться с ходом мыслей и рассуждениями основной группы и Сообщество Vue.

Чтобы иметь возможность объяснить Component-API в удобочитаемой форме, я решил разбить его на несколько частей:

  1. Синтаксис компонента.
  2. Реактивность.
  3. Составные.

Композиция-API: синтаксис компонента

Как мы рассмотрели в разделе Vue2 выше, до сих пор у нас были Options-API (официальный) и компонент класса (неофициальный) в качестве подходов для создания компонента.

Composition-API представил новый синтаксис, целью которого является сокращение стандартного кода, необходимого для написания нового компонента, а также добавление поддержки Typescript.

Чтобы начать создание компонента, мы будем использовать defineComponent .
Вместо использования export default мы будем использовать export default defineComponent({}), , таким образом, получая дополнительное преимущество поддержки типизации для каждого из свойств/методов в методе.

Теперь вы заметите, что в defineComponent у нас есть новый метод под названием setup, который концентрирует наши параметры и методы (удаляя необходимость в разделе данных и методов из Vue2).

Чтобы представить наши определенные параметры и методы представлению, setup ожидает, что мы вернем их как часть возвращаемых параметров метода.

Стоит отметить, что, хотя части data и methods ушли из Composition-API, props по-прежнему определяется так же. Кроме того, computed и watch теперь можно вызывать непосредственно из setup.

Состав-API: Реактивность

Для тех, кто пришел из React, то, как Composition-API обрабатывает реактивность, может показаться немного похожим на useState (хотя и не то же самое).

Есть 2 способа сделать переменную реактивной (2-way, или проще говоря, возможность отражать изменение как в представлении, так и в коде).

Реактивный:метод, который берет объект в качестве параметра и преобразует его в реактивный (за кулисами Vue будет выполнять рекурсивные итерации и преобразовывать каждую переменную в объекте в реактивную переменную).

Как в шаблоне, так и в коде доступ к данным из реактивной переменной аналогичен любой другой переменной JavaScript.

Хотя получить доступ к реактивному объекту просто, нужно быть осторожным с деконструкцией объекта.
Во время деконструкции объекта Vue теряет след реактивности объекта. Чтобы поддерживать реактивность, нам нужно будет использовать метод toRefs, чтобы преобразовать переменные внутри объекта обратно в реактивность.

Ref: метод, который принимает значение примитива (строка, число, логическое значение и т. д.) и преобразует его в реактивное (за кулисами Ref преобразует (упаковывает) значение в объект и передает его реактивному методу).

Для тех, кто занимается объектно-ориентированным бэкграундом, имя ref относится к ссылке и может рассматриваться как переход от типа значения к ссылочному типу.

Доступ к значению Ref можно получить непосредственно при передаче в шаблон, однако, в отличие от reactive, для доступа к переменной из кода нам нужно будет добавить к ней .value или, альтернативно, если мы хотим получить к ней доступ так же, как при использовании reactive, мы необходимо использовать метод под названием unref.

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

Для получения дополнительной информации о реактивности в Vue3 я бы порекомендовал такие видео, как Реактивность стала проще, Основы реактивности в Vue3 и Реактивность в Vue 3 — как это работает?.

Композиция-API: компонуемые

В последней части нашего погружения в Composition-API мы обсудим концепцию составных объектов.

Одним из соображений, стоящих за созданием Composition-API, было совместное использование кода. Как определить логические фрагменты кода, которые можно было бы легко использовать между компонентами.

Те, кто знаком с Vue2 и задаются вопросом, почему бы просто не использовать Mixins, могут прочитать эту статью, в которой более подробно рассматривается эта тема.

Как мы видели в разделе Vue2, популярным подходом к совместному использованию кода являются плагины. Однако. в Vue3 метод setup вызывается до создания компонента, что предотвращает использование ключевого слова this для доступа к глобальным свойствам.

Вместо этого с новым Composition-API мы можем использовать reactive, ref и даже computed даже вне компонента для создания повторно используемой функции (для тех, кто пришел из React, это похоже на подход с хуками).

Поскольку компонуемый — это просто функция, мы можем импортировать его и использовать в нашем компоненте.

Vue2 в стиле Vue3: Composition-API

Теперь, когда мы узнали, какие новые функции предоставляет Vue3 Composition-API, мы рассмотрим, как мы можем по-прежнему поддерживать наше созданное приложение Vue2, но с тем же синтаксисом, что и Vue3.

К счастью для нас, основная команда Vue усердно работала над портированием функциональности Composition-API в виде плагина.

Чтобы добавить Composition-API в проект, выполните следующую команду:
yarn add @vue/composition-api .

После завершения команды откройте файл main.ts (src/main.ts) и добавьте в него следующий код.

Теперь мы можем преобразовать наш предыдущий пример кода, чтобы использовать новый синтаксис Composition-API и сохранить совместимость при переходе на Vue3 в будущем.

Краткое содержание

Эта статья вышла намного длиннее, чем я ожидал (я все еще думаю, стоит ли разбивать ее на отдельные статьи), но, надеюсь, она помогла вам сделать первые шаги в мире Vue, настроив свой первый проект, изучив некоторые концепции, которые есть у Vue2, понимание того, что может предложить Vue3 Composition-API, и даже возможность изменить свой код, чтобы использовать его во Vue2.

В следующей части серии мы возьмем наш существующий код и преобразуем его в более близкий реальный пример (форма входа), используя Composition-API и управление состоянием с помощью Pinia.

Если у вас есть какие-либо вопросы, замечания или предложения, оставьте комментарий, и я буду рад ответить.