Инструменты и приемы для ускорения разработки на Vue.js

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

Мы подробно рассмотрим методы, которые нужно взять на вооружение, упомянем ошибки, которых следует избегать, а также перечислим инструменты, которые ускоряют и упрощают разработку на основе Vue.js. В основном мы сосредоточимся на Vue 2, поскольку эту версию все еще использует большинство разработчиков. Пользователям Vue 3 беспокоиться не стоит – почти все методы применимы и к этой версии, поскольку она представляет собой расширенный и более быстрый вариант Vue 2. Если вы уже хорошо знакомы с Vue 2 и хотели бы узнать, что нового появилось в Vue 3, посмотрите эту инструкцию по переходу на новую версию.

Примечание: данная статья предназначена как для новичков, так и для опытных веб-разработчиков, которые хотят усовершенствовать свои навыки использования Vue.js. Для лучшего понимания материала пригодятся базовые знания JavaScript и Vue.js.

Структура проекта: модульная или файловая

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

Во время создания нового проекта с помощью сборщика Vue.js CLI мы получаем файловую структуру, установленную разработчиками фреймворка по умолчанию. Использование файловой структуры для небольшого проекта – неплохая идея, но если приложение будет масштабироваться, проекту потребуется другая структура. В противном случае код станет запутанным, а поиск файлов – затрудненным.

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

+-- src/ |   +-- assets/ |       +-- logo.png |       +-- userprofile.png |   +-- components |       +-- NotificationBar.vue |       +-- LoginForm.vue |       +-- DashboardInfo.vue |       +-- AuthenticationModal.vue |   +-- main.js

Для упрощения навигации и поиска информации все компоненты следует рассортировать в соответствии с логикой приложения и бизнеса: нужно завести отдельные модули для аутентификации, продукта, сервиса и так далее. Код станет опрятнее, а навигация – проще:

+-- modules/ |   +-- AuthModule/ |       +-- assets/ |           +-- userprofile.png |       +-- Components/ |           +-- Authentication.vue |           +-- login.vue |   +-- NotificationModule |       +-- assets/ |            +-- Alert.png |       +-- Components/ |            +-- NotificationBar.vue |   +-- ProductModule/

Организация модулей

Для организованного хранения модули следует разделить на два основных типа:

• системные модули Vue.js;
• модули приложения.

Системные модули Vue.js используются в процессе создания приложения. К примеру, в сервисном модуле содержатся все сетевые запросы, и при необходимости отправки сетевого запроса приложение отсылает все запросы из этого модуля.

Разделение на модули в соответствии с функциональностью приложения – лучший способ структурирования проекта. Это особенно важно, когда над реализацией различных функций работают отдельные команды разработчиков. Еще одно преимущество модульной структуры заключается в том, что она упрощает обслуживание и поддержку, а в перспективе – доработку и обновления приложения.

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

К примеру, если ваша команда работает над модулем «Выплаты», будет удобно расположить все соответствующие функции и данные в папке payout («выплаты»).

+-- modules/ |   +-- payout/ |       +-- index.js |       +-- assets/ |       +-- Components/ |            +-- PayOut.vue |            +-- UserInfo.vue |       +-- store/ |            +-- index.js  |            +-- actions.js |            +-- mutations.js           |       +-- Test/

Файл index.js при этом будет содержать код для импорта и использования только тех плагинов, которые непосредственно связаны с выплатами. В папке assets («ресурсы») будут располагаться ресурсы – изображения и стили – используемые в дизайне модуля «Выплаты». Директория Components содержит компоненты, задействованные в функциях расчета выплат, а в папке store хранятся все действия, геттеры и мутации, используемые в соответствующих состояниях. Для хранения тестовых данных и запросов предназначена папка test.

Использование пользовательских директив

Директивы в Vue.js – это методы для выполнения определенных действий. Названия директив начинаются с префикса «v-»: v-if, v-model, v-for. Когда в приложении, созданном на основе Vue.js, мы используем, например, v-model для связи данных с формой ввода, мы передаем фреймворку команду, определенную и встроенную в Vue.js.

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

Регистрация пользовательских директив и хуков

Объявить кастомные директивы можно двумя способами:

1. Глобально – в нашем файле js.
2. Локально – в нашем компоненте.

Хуки в директивах срабатывают, как методы – при наступлении определенного события. Фреймворк Vue.js предоставляет нам хуки жизненного цикла – created и mounted, а также хуки для использования в наших собственных директивах.

Предположим, мы работаем над веб-приложением и хотим, чтобы фоновой цвет одной из страниц менялся при каждой загрузке. Такого эффекта можно добиться, используя кастомную директиву. Мы назовем эту директиву colorChange. Наш шаблон может выглядеть примерно так:

Чтобы пользовательская директива могла работать, мы добавим в файл main.js следующий код:

// custom directive Vue.directive("color-change", {   bind: function (el) {     const random = Math.floor(Math.random() * 900000) + 100000;     el.style.backgroundColor = `#${random}`   } })

Директива Vue.js принимает название кастомной директивы в качестве первого аргумента, затем принимает Object в качестве второго аргумента, который определяет поведение пользовательской директивы. В качестве хука выступает bind – он связывает директиву с элементом. Элемент принимает следующие аргументы:

• el – это узел элемента, с которым мы связываем директиву;
• binding – задает поведение директивы;
• vnode – это виртуальный узел Vue.js.

Так одной директивой мы задали 6-разрядный диапазон генерации hex-кода фонового цвета для страницы.

Рекомендации по созданию пользовательских директив

Выше вы создали свою первую директиву и теперь готовы к рекомендациям. За исключением el, никогда не изменяйте аргументы хуков. Всегда следите за тем, чтобы права доступа оставались в режиме «только чтение», поскольку аргументы хуков – это объекты с нативными методами, которые могут вызвать неполадки в случае изменения. При необходимости для распределения информации между хуками используйте наборы данных Vue.js.

При использовании CLI-сборки Vue.js, кастомные директивы должны быть объявлены в файле main.js, чтобы все .vue файлы имели к ним доступ. Давайте своим директивам «говорящие» названия, чтобы сразу было понятно, какие именно функции они выполняют. Для демонстрации возможностей директив была создана эту страницу. Дополнительные сведения о пользовательских директивах можно найти в официальной документации.

Управление обновлениями

Система реагирования в Vue.js очень мощная – она обнаруживает элементы, нуждающиеся в обновлении, и обновляет их самостоятельно. Вам, как разработчику, не придется ничего делать для этого. К примеру, страница будет автоматически перезагружаться при каждом открытии. Однако, иногда, нам может потребоваться написать код, который будет форсировать обновление.

Примечание: написание кода для обновлений по требованию необходимо достаточно редко, но программирование такого события дает лучшее понимание системы реагирования Vue и динамического обновления данных.

Принудительное обновление

В большинстве случаев, при изменении данных в Vue-объектах страницы обновляются автоматически. Иногда обновление не производится автоматически, например, при использовании директивы v-for в коде, перебирающем значения элементов массива без передачи параметра :key.

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

var app = new Vue({   data: {     items: ['1', '2']   } }) app.items[1] = '7' //vue does not notice any change

Есть несколько способов запустить обновление или рендеринг. Худший метод – использование v-if для обновления страницы, если значение какого-то события true (истинно), и скрытие компонента, если значение равно false (ложно). Этот метод плох, потому что шаблон не удаляется из памяти, а просто скрывается из вида до следующего обращения.

В приведенном выше коде, состояние show («показывать») изначально установлено на true, и благодаря этому компонент отображается на странице. После нажатия кнопки вызывается функция перерисовки rerender(),состояние компонента изменяется на false, и он становится невидимым. На следующем этапе, во время обновления DOM, состояние меняется на true и компонент появляется снова. Это очень нерациональный способ обновления компонентов.

Я хотел бы привести два оптимальных способа обновления:

1. С помощью $forceUpdate;
2. С изменением ключей.

При использовании встроенного в Vue метода $forceUpdate, вложенные компоненты не обновляются – обновление затрагивает только экземпляры Vue.js. Мы можем вызвать обновление на глобальном уровне:

import Vue from 'vue'; Vue.forceUpdate();

А также на локальном уровне:

export default {   methods: {     methodThatForcesUpdate() {       this.$forceUpdate();     }   } }

Другой метод обновления основан на изменении ключей. Он гораздо предпочтительнее $forceUpdate, поскольку уведомляет Vue.js о связях между компонентами и наборами данных. Когда ключ изменяется, метод уничтожает старый компонент и создает новый, по словам разработчика в обсуждении этой проблемы на GitHub. Вы можете использовать атрибут :key, чтобы дать фреймворку знать, какой компонент связан с определенными данными. После изменения ключа Vue.js уничтожит старый компонент и создаст новый.

Сторонние библиотеки и оптимизация

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

Недавно для работы над проектом я использовал компонент библиотеки Vuetify. Когда я проверил размер пакета, то обнаружил, что он превышает 500 Кб в сжатом виде. Такие размеры пакета могут радикально снизить производительность приложения. Вы можете проверить размер пакета приложения с помощью плагина webpack-bundle-analyzer. Его устанавливают выполнением следующей команды:

npm install --save-dev webpack-bundle-analyzer

И включением в файл конфигурации:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;  module.exports = {   plugins: [     new BundleAnalyzerPlugin()   ] }

Хорошие способы оптимизации Vue-приложений

Основной пакет должен содержать лишь самые необходимые зависимости – такие как vue и vuex. Следует избегать включения в основной пакет тех библиотек, которые используются лишь в отдельных разделах приложения.

При использовании библиотек компонентов следует импортировать только нужные компоненты, по отдельности, а не всю библиотеку разом. Например, так выглядит импорт отдельных компонентов из Vuetify:

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

Своевременное принятие решения об использовании Vuex

Раньше мне часто приходилось размышлять – начинать ли проект с использованием Vuex или без. Иногда мне случалось начать небольшой проект без Vuex, который представляет собой паттерн для управления состоянием – и проект превращался в хаос.

Итак, когда же необходимо использовать Vuex? Для этого надо оценить следующие факторы:

• размер проекта;
• простоту кода;
• маршрутизацию;
• набор используемых данных;
• схему вложения компонентов.

Если планируется масштабирование приложения, использование Vuex необходимо. Если у вас возникают сомнения в том, стоит ли подключать Vuex – лучше сделать это сразу. Однако, следует заметить, что появилась новость о том, что в новую версию Vue 3 включен Composition API, который заменяет Vuex.

Настройки Vuex для масштабных приложений

Vuex включает в себя четыре основных компонента:

1. Состояние – для хранения информации.
2. Геттеры – для извлечения данных.
3. Мутации – для изменения данных.
4. Действия – для манипуляций по изменению информации.

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

Вы можете создать отдельные файлы для каждого из компонентов Vuex, например, так:

├── services ├── main.js └── store     ├── index.js               ├── actions.js     ├── mutations.js     └── Getters.js ├── components

Создание модулей для разделов приложения

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

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

store/    ├── index.js     └── modules/        ├── cart            ├── index.js                      ├── actions.js            ├── mutations.js               ├── product.js        ├── login.js

Хорошие практики использования Vuex-модулей

По мере усложнения модулей ручной импорт и организация становятся утомительными. Рекомендуется создавать файл index.js в корневой папке каждого модуля для индексации всех файлов.

Убедитесь, что вы используете стандартный шаблон для названий файлов. Используйте, например, комбинацию слов, начинающихся с буквы в верхнем регистре, и добавляйте расширение .store.js в названия следующим образом:

modules/        ├── cart.js            ├── index.js   -> auto export module                   ├── userProduct.store.js            ├── userData.store.js

Код, связанный с бизнес-процессами или асинхронными процедурами, не должен использоваться в мутациях. Вместо этого используйте действия. Лучшей практикой считается использование геттеров вместо прямого обращения к объектам состояния. Геттеры могут обращаться к любому Vue-компоненту, используя mapGetters в качестве вычисляемого свойства; результат при этом сохраняется с учетом зависимостей. Кроме того, убедитесь, что модули имеют уникальные названия и не доступны на глобальном уровне.

Использование функций provide и inject для передачи данных

Представьте себе приложение с множеством разнообразных компонентов. Родительский компонент включает в себя вложенные компоненты. На приведенном ниже рисунке показано, что дочерние компоненты A, B, D являются компонентами верхнего уровня по отношению к вложенным компонентам C, E и F. Предположим, мы хотим использовать данные (скажем, адрес пользователя) из дочерних компонентов A, C, F в нашем родительском компоненте.

Схема взаимодействия родительского и дочерних компонентов

Для использования этих данных нам потребуется:

1. Предоставить значение родительскому компоненту (провайдеру зависимости).
2. Ввести значение в дочерний компонент F (потребитель зависимости).

Предоставим данные в родительском компоненте:

app.component('parent-component', {   data() {     return {       user: {name:"Uma Victor", address:"No 33 Rumukwurushi"}     }   },   provide() {     return {      userAddress: this.user.address     }   },   template: `     ...   ` })

Здесь мы используем функцию provide для возвращения объекта, имеющего доступ к свойствам экземпляра компонента.

В нашем вложенном компоненте child-f мы используем следующий код:

app.component('child-f', {   inject: ['userAddress'],   template: `

Если мы просто изменим параметр user.address, сделанное изменение не будет отмечено в значении компонента, поскольку данные, передаваемые с помощью функций provide и inject, изначально не являются реактивными. Для исправления этого недочета мы передадим объект reactive в функцию provide. Назначим вычисляемое свойство нашему объекту:

app.component('parent-component', {   data() {     return {       user: {name:"Uma Victor", address:"No 33 Rumukwurushi"}     }   },   provide() {     return {      userAddress: Vue.computed(() => this.user)      }   },   template: `     ...   ` })

Такой подход гораздо проще, чем использование Vuex. Однако в Vue 3 мы можем использовать провайдеры контекста, которые дают возможность обмена информацией между многочисленными компонентами – точно так же, как Vuex.

Правильное использование компонентов форм

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

Простая форма авторизации

Исходный код у этой формы следующий:

Мы можем создать компонент BaseInput для использования во всех трех полях ввода. Шаблон этого компонента выглядит следующим образом:

Мы хотим, чтобы компонент BaseInput принимал свойство label (которое всегда является строкой), и если у Input есть свойство label, мы отобразим его в шаблоне, как показано в приведенном выше коде.

Когда мы заполняем форму, запускается метод updateInput, который принимает событие ввода в качестве аргумента. Затем метод создает событие с названием Input, и в нагрузку к нему – event.target.value, которое в нашей форме отвечает за имя:

Директива v-model прослушивает события ввода и после совершения события передает введенные данные в userData.name. Если мы хотим создать указатель места заполнения, в Vue 2 может возникнуть ошибка, поскольку атрибуты там всегда ссылаются на родительский компонент. Для исправления этого недочета мы устанавливаем значение inheritAttrs на false и привязываем attrs.

После исправления ошибки с указателем места ввода код выглядит так:

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

Примечание: $Attrs в версии Vue 3 включает в себя все прослушиватели, привязки стилей и классы.

Знакомство с Vue Devtools

Devtools в Vue.js – мощный инструмент, позволяющим проводить эффективную отладку приложения в реальном времени. Он особенно пригодится в том случае, если мы используем Vuex и хотим отслеживать все мутации и изменения в приложении. Большинство разработчиков использует Devtools в качестве браузерного приложения, но его также можно установить как отдельное приложение.

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

Установка Devtools в качестве приложения

У вас может возникнуть вопрос – зачем устанавливать Devtools как отдельную программу, если его можно использовать в виде плагина для браузера. Дело в том, что если установить приложение, его можно будет использовать в любом браузере.

Устанавливаем программу так:

• Глобально:

npm install -g @vue/devtools

• Или локально:

npm install --save-dev @vue/devtools

После завершения установки выполните следующую команду:

vue-devtools

Затем в нашем файле index.html, который располагается в общей папке в корневой директории Vue.js проекта, пропишите следующий код:

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

Операции, которые позволяет осуществлять Devtools

Вот несколько полезных приемов для использования с Devtools.

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

Экран Devtools при выборе темного дизайна

Хронология проекта. В этом разделе отображаются произошедшие события. Раздел располагается рядом с «Инспектором».

Хронология событий в Devtools

Формат названий компонентов. Здесь можно выбрать формат названий – с тире или с использованием букв в верхнем регистре. С другими полезными функциями можно ознакомиться здесь.

Инструменты для ускорения работы в Vue

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

Библиотеки для тестирования

Тестирование – важнейший этап при создании масштабных веб-приложений. Оно помогает избежать появления багов при работе в большой команде. Для проверки Vue приложений используют три вида библиотек:

1. Тестирование компонентов – Vue Testing Library, Vue Test Utils.
2. Модульное тестирование – Jest, Mocha.
3. Сквозное тестирование (end to end, е2е) – js, Cypress.

Библиотеки компонентов

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

• Vue Material Kit. Крутой набор, созданный на основе Material Design от Google. Содержит более 60 компонентов.
• Buefy. Небольшая библиотека, основанная на фреймворке Bulma CSS. Если у вас нет проблем с языком Sass, она отлично подойдет.
• Vuetify. Еще один набор на основе Material Design, содержит генераторы кода для форм. Часто обновляется.
• Quasar. Набор компонентов для разработки фронтенда, подходит для создания быстрых кроссплатформенных приложений.

Другие полезные библиотеки

Другие библиотеки, которые могут пригодиться Vue-разработчику:

• FilePond. Решения для загрузки и автоматической оптимизации изображений.
• Vuelidate. Очень пригодится для работы с формами и валидации данных, вводимых пользователями. Простые и легкие компоненты.
• Vue-Clickaway. Прослушиватель для кликов мышью за пределами компонента (в самом Vue такого нет).

Хороших библиотек очень много. Найти нужную можно на таких ресурсах как madewithvuejs.com и vuejsexamples.com.

Полезные расширения при работе с Vue

Расширения значительно повышают продуктивность при написании кода в Vue. Особенно полезными являются следующие:

• Vetur. Подсветка, отладка, автозавершение кода.
• Bookmarks. Пригодится при работе над большими проектами, поскольку позволяет делать закладки, отмечать фрагменты кода и быстро переходить между ними.
• Eslint. Предупреждает об ошибках в коде.
• js Extension Pack. Набор расширений, в который входят различные полезные плагины – Prettier, Vetur, Night Owl и другие.

Заключение

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