Инструменты и приемы для ускорения разработки на 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-приложений
- Настройки Vuex для масштабных приложений
- Хорошие практики использования Vuex-модулей
- Установка Devtools в качестве приложения
- Операции, которые позволяет осуществлять Devtools
- Библиотеки для тестирования
- Библиотеки компонентов
- Другие полезные библиотеки
- Полезные расширения при работе с Vue
Структура проекта: модульная или файловая
Давайте начнем со структуры проекта и рассмотрим, как структурировать файлы и модули, и почему файловая структура хуже подходит для масштабируемых проектов, по сравнению с модульной.
Во время создания нового проекта с помощью сборщика 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.
Если же мы хотим, чтобы директивы выполняли какие-то другие действия, не определенные разработчиками фреймворка, мы можем создать свои собственные, кастомные директивы.
Регистрация пользовательских директив и хуков
Объявить кастомные директивы можно двумя способами:
- Глобально – в нашем файле js.
- Локально – в нашем компоненте.
Хуки в директивах срабатывают, как методы – при наступлении определенного события. Фреймворк Vue.js предоставляет нам хуки жизненного цикла – created и mounted, а также хуки для использования в наших собственных директивах.
Предположим, мы работаем над веб-приложением и хотим, чтобы фоновой цвет одной из страниц менялся при каждой загрузке. Такого эффекта можно добиться, используя кастомную директиву. Мы назовем эту директиву colorChange. Наш шаблон может выглядеть примерно так:
<template> <div id="app" v-color-change> <HelloWorld msg="Hello Vue in CodeSandbox!"/> </div> </template>
Чтобы пользовательская директива могла работать, мы добавим в файл 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.
<div v-for="item in itemsArray" :key="item">
При этом Vue.js будет отслеживать изменения всех узлов, и запускать рендеринг страницы. Редкий случай, когда может потребоваться форсированное обновление – если мы намеренно или случайно передаем в массив значение по индексу.
var app = new Vue({ data: { items: ['1', '2'] } }) app.items[1] = '7' //vue does not notice any change
Есть несколько способов запустить обновление или рендеринг. Худший метод – использование v-if для обновления страницы, если значение какого-то события true (истинно), и скрытие компонента, если значение равно false (ложно). Этот метод плох, потому что шаблон не удаляется из памяти, а просто скрывается из вида до следующего обращения.
<template> <div v-if="show"> <button @click="rerender">re-render</button> </div> </template> <script> export default { data() { return { show: true, }; }, methods: { rerender() { this.show= false; this.$nextTick(() => { this.show = true; }); } } }; </script>
В приведенном выше коде, состояние show («показывать») изначально установлено на true, и благодаря этому компонент отображается на странице. После нажатия кнопки вызывается функция перерисовки rerender(),состояние компонента изменяется на false, и он становится невидимым. На следующем этапе, во время обновления DOM, состояние меняется на true и компонент появляется снова. Это очень нерациональный способ обновления компонентов.
Я хотел бы привести два оптимальных способа обновления:
- С помощью $forceUpdate;
- С изменением ключей.
При использовании встроенного в Vue метода $forceUpdate, вложенные компоненты не обновляются – обновление затрагивает только экземпляры Vue.js. Мы можем вызвать обновление на глобальном уровне:
import Vue from 'vue'; Vue.forceUpdate();
А также на локальном уровне:
export default { methods: { methodThatForcesUpdate() { this.$forceUpdate(); } } }
Создание приложений с помощью Vue CLI
Другой метод обновления основан на изменении ключей. Он гораздо предпочтительнее $forceUpdate, поскольку уведомляет Vue.js о связях между компонентами и наборами данных. Когда ключ изменяется, метод уничтожает старый компонент и создает новый, по словам разработчика в обсуждении этой проблемы на GitHub. Вы можете использовать атрибут :key, чтобы дать фреймворку знать, какой компонент связан с определенными данными. После изменения ключа Vue.js уничтожит старый компонент и создаст новый.
<template> <Child :key="key" /> </template> <script> export default { data() { return { key: 0, }; }, methods: { forceRerender() { this.key += 1; } } } </script>
Сторонние библиотеки и оптимизация
При разработке приложений практически невозможно обойтись без использования сторонних библиотек. Дополнительные библиотеки могут превратиться в серьезную проблему, если их не контролировать – размер пакетов будет расти, а скорость работы приложения – замедляться.
Недавно для работы над проектом я использовал компонент библиотеки 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:
<template> <v-app> <v-navigation-drawer app> <!-- --> </v-navigation-drawer> <v-app-bar app> <!-- --> </v-app-bar> </v-app> </template> <script> import { VApp, VNavigationDrawer, VAppBar } from 'vuetify/lib' export default { components: { VApp, VNavigationDrawer, VAppBar, } } </script>
При таком подходе мы уменьшаем объем пакета и объем кода, и получаем только те компоненты, которые нам действительно нужны для выполнения задачи.
Своевременное принятие решения об использовании Vuex
Раньше мне часто приходилось размышлять – начинать ли проект с использованием Vuex или без. Иногда мне случалось начать небольшой проект без Vuex, который представляет собой паттерн для управления состоянием – и проект превращался в хаос.
Итак, когда же необходимо использовать Vuex? Для этого надо оценить следующие факторы:
- размер проекта;
- простоту кода;
- маршрутизацию;
- набор используемых данных;
- схему вложения компонентов.
Если планируется масштабирование приложения, использование Vuex необходимо. Если у вас возникают сомнения в том, стоит ли подключать Vuex – лучше сделать это сразу. Однако, следует заметить, что появилась новость о том, что в новую версию Vue 3 включен Composition API, который заменяет Vuex.
Настройки Vuex для масштабных приложений
Vuex включает в себя четыре основных компонента:
- Состояние – для хранения информации.
- Геттеры – для извлечения данных.
- Мутации – для изменения данных.
- Действия – для манипуляций по изменению информации.
При использовании перечисленных компонентов стоит помнить, что действия всегда производят изменения. Это позволяет нам использовать инструменты, которые отслеживают изменения и возвращаются к определенным периодам в состоянии объектов и асинхронных операций для выполнения необходимых бизнес-процессов и действий.
Вы можете создать отдельные файлы для каждого из компонентов 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 JS
Код, связанный с бизнес-процессами или асинхронными процедурами, не должен использоваться в мутациях. Вместо этого используйте действия. Лучшей практикой считается использование геттеров вместо прямого обращения к объектам состояния. Геттеры могут обращаться к любому Vue-компоненту, используя mapGetters в качестве вычисляемого свойства; результат при этом сохраняется с учетом зависимостей. Кроме того, убедитесь, что модули имеют уникальные названия и не доступны на глобальном уровне.
Использование функций provide и inject для передачи данных
Представьте себе приложение с множеством разнообразных компонентов. Родительский компонент включает в себя вложенные компоненты. На приведенном ниже рисунке показано, что дочерние компоненты A, B, D являются компонентами верхнего уровня по отношению к вложенным компонентам C, E и F. Предположим, мы хотим использовать данные (скажем, адрес пользователя) из дочерних компонентов A, C, F в нашем родительском компоненте.
Схема взаимодействия родительского и дочерних компонентов
Для использования этих данных нам потребуется:
- Предоставить значение родительскому компоненту (провайдеру зависимости).
- Ввести значение в дочерний компонент 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: ` <h2>Injected property: {{ this.userAddress }}</h2> ` })
Если мы просто изменим параметр 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 делает создание первоклассных форм очень простым занятием: надо лишь знать, как правильно использовать компоненты. В любом веб-приложении, в котором используются формы для регистрации и авторизации, мы хотим реализовать взаимосвязь поведения и дизайна. Взглянем, к примеру, на страницу авторизации, продемонстрированную ниже.
Простая форма авторизации
Исходный код у этой формы следующий:
<template> <div class="form-group"> <form> <label for="email">Your Name</label> <input type="text" id="name" class="form-control" placeholder="name" v-model="userData.name" /> <label for="email">Your Email Address</label> <input type="text" id="email" class="form-control" placeholder="Email" v-model="userData.email" /> <label for="email">Your Password</label> <input type="text" id="password" class="form-control" placeholder="password" v-model="userData.password" /> </form> </div> </template> <script> export default { data() { return { userData: { name: '', email: '', password: '' } } }, } </script>
Мы можем создать компонент BaseInput для использования во всех трех полях ввода. Шаблон этого компонента выглядит следующим образом:
<template> <div> <label v-if="label">{{ label }}</label> <input type="email" @value="value" @input="updateInput" v-bind="$attrs"> </div> </template> <script> export default { props: { label: { type: String, default: "" }, value: [String, Number] }, methods: { updateInput(event) { this.$emit('input', event.target.value) } } } </script>
Приступая к работе с Vuex: руководство для начинающих
Мы хотим, чтобы компонент BaseInput принимал свойство label (которое всегда является строкой), и если у Input есть свойство label, мы отобразим его в шаблоне, как показано в приведенном выше коде.
Когда мы заполняем форму, запускается метод updateInput, который принимает событие ввода в качестве аргумента. Затем метод создает событие с названием Input, и в нагрузку к нему – event.target.value, которое в нашей форме отвечает за имя:
<BaseInput label="Your Name" v-model="userData.name" placeholder="Name"/>
Директива v-model прослушивает события ввода и после совершения события передает введенные данные в userData.name. Если мы хотим создать указатель места заполнения, в Vue 2 может возникнуть ошибка, поскольку атрибуты там всегда ссылаются на родительский компонент. Для исправления этого недочета мы устанавливаем значение inheritAttrs на false и привязываем attrs.
<script> export default { inheritAttrs: false, props: { label: { type: String, default: "" }, value: [String, Number] }, methods: { updateInput(event) { this.$emit('input', event.target.value) } } } </script>
После исправления ошибки с указателем места ввода код выглядит так:
<template> <div class="form-group"> <form> <BaseInput label="Your Name" v-model="userData.name" placeholder="Name"/> <BaseInput label="Your Email Address" v-model="userData.email" placeholder="Email"/> <BaseInput label="Your Password" v-model="userData.password" placeholder="Password"/> </form> </div> </template>
Теперь у нас есть независимый компонент, готовый для повторного использования. Вы можете модифицировать его код на этой странице.
Примечание: $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 проекта, пропишите следующий код:
<script src="http://localhost:8098"></script>
После перезагрузки приложения соединение установится автоматически.
Операции, которые позволяет осуществлять Devtools
Вот несколько полезных приемов для использования с Devtools.
Темная тема оформления. Новая версия приложения позволяет переключаться между светлой, темной и контрастной темами оформления. Сделать это можно, перейдя в глобальные настройки и выбрав нужную опцию.
Экран Devtools при выборе темного дизайна
Хронология проекта. В этом разделе отображаются произошедшие события. Раздел располагается рядом с «Инспектором».
Хронология событий в Devtools
Формат названий компонентов. Здесь можно выбрать формат названий – с тире или с использованием букв в верхнем регистре. С другими полезными функциями можно ознакомиться здесь.
Инструменты для ускорения работы в Vue
Во время работы с фреймворком Vue.js у разработчиков часто возникает желание реализовать какую-то дополнительную опцию, но это либо занимает слишком много времени, либо оказывается слишком сложным. Профессиональные разработчики могут добавлять свои библиотеки, плагины и инструменты, которые пригодятся другим пользователям. Взглянем на некоторые такие дополнения.
Библиотеки для тестирования
Тестирование – важнейший этап при создании масштабных веб-приложений. Оно помогает избежать появления багов при работе в большой команде. Для проверки Vue приложений используют три вида библиотек:
- Тестирование компонентов – Vue Testing Library, Vue Test Utils.
- Модульное тестирование – Jest, Mocha.
- Сквозное тестирование (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.
Вот несколько полезных ресурсов, которые пригодятся вам для расширения знаний по темам, рассмотренным в данном руководстве.
Пользовательские директивы – официальная документация.
Реактивность в Vue.js – официальный сайт.
Официальный сайт плагина Devtools.
Обсуждение различий между Composition API и Vuex.
Полезная статья о дополнительных инструментах разработки в Vue.js.
Источник: www.internet-technologies.ru