JavaScript-фреймворк Vue.js: особенности и примеры реализации

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

Содержание:
1. Что такое Vue.js?
2. История создания Vue
3. Концепция фреймворка. Что внутри?
4. Преимущества Vue.js
5. Структура Vue.js
6. Жизненный цикл компонентов
7. Модульность
8. Однофайловые компоненты
9. Основные библиотеки и инструменты
10. Маршрутизация
11. Примеры лучших проектов

1. Что такое Vue.js?

С добавлением фреймворков, JavaScript стал благом для современной массовой разработки приложений. Vue.js от французского «представление» — это бесплатная прогрессивная JS-платформа с открытым исходным кодом для создания адаптивных приложений с продвинутым пользовательским интерфейсом. Количество разработчиков, использующих его, растет с экспоненциальной скоростью. Если в 2017 году у Vue.js было около 36 000 звезд на Github, то к концу 2021 года их стало 192 000.

В отличие от других популярных проектов на базе JavaScript, Vue.js не поддерживается такими крупными корпорациями, как Facebook (воспевающий React) или Google (взявший шефство над Angular). Vue.js ведет сообщество независимых разработчиков, внося туда новые фичи и исправляя проблемные места.

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

Для работы с фреймворком необходимо:

1. Знание HTML и CSS.
2. Знание базового JavaScript.
3. Знакомство с функциями и синтаксисом ES6+.
4. Node.js и npm, установленные глобально.

2. История создания Vue

Молодому инженеру Google Creative Lab Эвану Ю, использовавшему для работы над доверенным ему проектом на базе Angular, захотелось сделать более легкое решение для повседневных задач разработки. Начав экспериментировать в свободное время, он за шесть месяцев изготовил опенсорс-инструмент для быстрого создания прогрессивных интерфейсов и выложил его на GitHub. Конечно, на старте проект был сыроват, поэтому еще год ушел на его доработку. В октябре 2015 года была выпущена первая стабильная версия 1.0.

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

А недавняя громкая проблема React с лицензией невольно придала Vue.js дополнительный импульс, дав разработчикам четкое представление о том, что они могут безопасно использовать Vue.js вместо React, без потери качества.

3. Концепция фреймворка. Что внутри?

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

• Шаблоны Vue.js. В экосистеме Vue.js синтаксис шаблона на основе HTML используется для подключения DOM объектной модели документа к данным экземпляра.
• Система реактивности. Помимо шаблонов, Vue.js имеет надежную систему реактивности. Модели представляют собой простые JavaScript-объекты. По мере изменения которых за счет обновления данных управление состоянием приложения становится более простым и очевидным.
• Компоненты. При помощи компонентов Vue.js становится возможным повторно использовать код. Это настраиваемые элементы, помогающие компилятору работать с максимальной эффективностью. Компонент — это своего рода предопределенная опция в экземпляре Vue.js, служащая для прояснения абстракции.
• Продвинутая работа с URL. Для управления URL-адресами используется маршрутизация Vue.js. Когда пользователь щелкает на элемент страницы, маршрутизатор изменяет адрес, отображая его правильное представление.
• Анимации и переходы. Возможность использования эффектов перехода при вставке, обновлении или удалении элементов из DOM.

4. Преимущества Vue.js

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

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

1. Фреймворк Vue.js основан на шаблоне MVVM (Model-View-ViewModel), производном от классического шаблона Model-View-Controller (MVC). Его появление способствовало разделению интерфейсной разработки графического UI пользователя и внутренней бизнес-логики, что значительно повышает эффективность создания приложений. Ядро MVVM — уровень ViewModel, чем-то похожий на преобразователь значений, отвечающий за изменение объектов данных в модели.
2. Простое использование и легкая интеграция. Это один из самых удобных для новичков инструмент, с низкой кривой обучения по сравнению с другими фреймворками. Также он будет интуитивно понятен разработчикам, ранее работавшим с jQuery и Angular. А еще его просто интегрировать в другие библиотеки или использовать как отдельный проект.
3. Состоит из компонентов. Компонент — важная часть Vue.js. Это блоки кода, которые можно использовать многократно, включающие в себя как описание интерфейса приложения, так и реализацию его возможностей. Они нужны разработчику для создания легко поддерживаемой, модульной базы кода для создания крупномасштабных программ.
4. Производительность. Vue.js — небольшой и быстрый фреймворк с точки зрения производительности, что делает его одним из важнейших инструментов для разработки мобильных приложений.
5. Реактивная привязка данных. О ней мы уже говорили в начале. Каждый раз при изменении данных DOM обновляется автоматически.
6. Virtual DOM. Мир Vue.js вращается вокруг DOM. По сути, он служит интерфейсом между скриптами и разметкой, что упрощает отправку и получение данных из HTML. При изменении элементов CSS, в некоторых случаях необходимо перестраивать все дерево. Vue.js создает копию в виртуальной DOM, а не в DOM браузера. За счет устранения необходимости в дублировании информации повышается общая производительность.

5. Структура Vue.js

Компоненты (Components)

Компонент — это замкнутая, многоразовая, чаще всего единственная часть логики пользовательского интерфейса.

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

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

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

При создании компонента в .vue-файле, на базовом уровне вы найдете три раздела для вставки кода:

Шаблон(template). Написанный на расширенной версии языка шаблонов (HTML), он служит директивой. Это своего рода правила по созданию окончательной разметки компонента на основе его внутреннего состояния.

Скрипт(script). Здесь находится логика приложения. В этот раздел входят:

• Свойства. Набор входных переменных, используемых для настройки поведения компонента. Это могут быть фильтры данных, порядок сортировки, метки, переключатели видимости и т.д.
• Состояние. Это необязательно, но часто присутствует. Это структура данных, обеспечивающая состояние компонента в данный момент времени. Оно будет меняться со временем в зависимости от происходящих событий (клик, прокрутка, мутации DOM).

Стили. Здесь размещаются стилевые файлы CSS.

Компоненты всегда имеют определенное имя. Это то, что ищет компилятор Vue для создания и монтирования его экземпляров. Для использования компонента в шаблоне, просто создайте HTML-тег с его именем в треугольных скобках.

Самый простой способ зарегистрировать компоненты — сделать это глобально с помощью метода Vue.component. При глобальной регистрации их можно использовать в любом месте дерева компонентов вашего приложения, например:

// глобальная регистрация компонента

Vue.component("spinning-text", { 
props: { speed: { type: String } }, 
template: '<span :class="speed"><slot /></span>' }); 
Vue.component("bad-ux-button", { 
template: 
'<button>💥<spinning-text speed="ultra-fast">Do the thing</spinning-text>💥</button>' }); 
// Здесь мы создаем экземпляр корневого приложения Vue
new Vue({ el: "#bad-ux-app" });

Как видите, нам не нужно делать ничего особенного для использования spinning-text в шаблоне bad-ux-button.

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

Пример:

Предположим у нас есть приложение с полезными материалами для пользователей.

Сделаем в нем небольшой функционал, реализующий визуальное уведомление людей о том, что кто-то еще просматривает этот же материал. Используем для этого библиотеку WebSocket.

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

На самом деле нам понадобятся два компонента: viewers-list и viewer-badge.

Компонент viewer-badge будет простым:

// index.js 
Vue.component("viewer-badge", {
 template:  
<transition name="fade"> 
<img class="viewer-badge" :src="userInfo.avatar" :alt="userInfo.name" /> 
</transition>,
props: { userInfo: { type: Object, required: true } } });
 // styles.css 
.viewer-badge { border: solid 5px lightblue; margin: 5px; } 
.fade-enter-active, 
.fade-leave-active { transition: opacity 0.4s, transform 0.4s; } 
.fade-enter, .fade-leave-to { opacity: 0; transform: scale(0, 0); }

Здесь следует отметить несколько моментов:

1. Компонент получает userInfo-свойство, которое используется для рендеринга шаблона.
2. Мы используем компонент оболочки перехода Vue.js, чтобы значки появлялись и исчезали плавно.
3. Стиль нашего компонента находится в отдельном файле.

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

Теперь зарегистрируем viewers-list:

// index.js

Vue.component("viewers-list", { 
template:  
<div> 
<viewer-badge v-for="viewer in viewers" :info="viewer" :key="viewer.id" /> 
</div>, 
data() { return { viewers: concurrentViewersFromWebSockets}; } });

Важно: функция data() создает реактивное свойство на основе глобального массива concurrentViewersFromWebSockets. Поскольку мы используем v-for в шаблоне, каждое изменение содержимого реактивного массива будет вызывать повторную визуализацию нашего компонента.

Теперь мы помещаем экземпляр viewers-list внутрь элемента страницы и монтируем на нем приложение Vue:

// index.html 
<div id="viewers-app"> 
<viewers-list>
</viewers-list> 
</div> 
// index.js 
new Vue({ el: "#viewers-app" });

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

Интерполяции и двойные фигурные скобки (Double Curly Syntax)

Наиболее простой способ связывания данных при работе на Vue.js — это текстовая интерполяция с использованием синтаксиса Mustache (двойных фигурных скобок):

<span>Сообщение: {{ msg }}</span>

Выражение в фигурных скобках будет заменено значением свойства msg соответствующего объекта данных. Кроме того, оно будет обновлено при любом изменении этого свойства.

Также не обновляющую данные интерполяцию можно реализовать при помощи директивы v-once. Тут надо быть внимательным, так как это повлияет на все связанные переменные в рамках данного элемента:

<span v-once>Это сообщение никогда не изменится: {{ msg }}</span>

Директивы в рамках Vue.js

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

<element prefix-directiveId = ”[аргумент:] выражение [| фильтры…] ”>
</element>

Они похожи на атрибуты HTML, добавляемые в шаблоны кода. Посмотрим на простой пример директивы:

<div v-text = ”hello”> </div>

Здесь используется префикс v по умолчанию. Эта директива указывает Vue.js обновлять div textContent всякий раз, когда изменяется свойство экземпляра Vue.

Во Vue.js есть множество директив: v-model, v-bind, v-show, v-on, v-if (поставляемых с основной библиотекой). Vue.js также позволяет разработчикам создавать свои собственные настраиваемые директивы в индивидуальных случаях.

6. Жизненный цикл компонентов

Весь жизненный цикл Vue.js-приложения можно описать так:

• Вызов конструктора new Vue().
• Вызов метода beforeCreate() перед созданием объекта Vue.
• Инициализируем объект Vue с установкой его данных и методов.
• Вызов метода created().
• Компиляция шаблона.
• Вызов метода beforeMount().
• Замена элемента html, прикрепленного к объекту Vue, скомпилированным шаблоном.
• Вызов метода mounted(), после чего шаблон прикрепляется к DOM, и с ним уже можно работать.

При обновлении данных объекта, происходит следующее: Меняются данные. Вызов метода beforeUpdate(). Повторный рендеринг DOM для его соответствия виртуальному DOM. Вызов метода updated(). После чего DOM странице обновляется, и можно продолжать работать с vue-приложением.

• Когда работа с приложением завершена, вызывается метод beforeDestroy().
• Последним этапом цикла является вызов метода destroyed(). После чего объект Vue удаляется из памяти, отныне с ним уже нельзя работать.

7. Модульность

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

Вот пример такой структуры:

8. Однофайловые компоненты

Компоненты с одним файлом позволяют нам определять HTML, CSS и JS-компоненты в одном файле .vue.

Однофайловый компонент состоит из трех частей:

• <template>. Раздел, содержащий разметку компонента в виде обычного HTML.
• <script> Раздел со всей логикой JS.
• <style> Здесь содержатся все составные стили.

Вот пример однофайлового компонента HelloWorld:

<template>
 <div class="hello-world">
 <h2>{{ getGreeting }}</h2>
 <p>This is the Hello World component.</p>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
 reversedGreeting: '!dlrow olleH'
 }
 },
 computed: {
 getGreeting() {
 return this.reversedGreeting
 .split("")
 .reverse()
 .join("");
 }
 }
 }
</script>

<style scoped>
.hello-world {
 width: 100%;
 text-align: center;
}
</style>

9. Основные библиотеки и инструменты

Вот список наиболее примечательных инструментов и библиотек, которые вы должны знать и использовать в своих проектах:

1. Vue CLI — это полнофункциональный набор инструментов для быстрой разработки на Vue.js.
2. VuePress — генератор статических сайтов на базе Vue.js.
3. Gridsome во многом похож на VuePress, но использует другой подход при работе с источниками данных.
4. Vuex — плагин для управления состоянием, служит централизованным хранилищем для всех компонентов приложения, состояние которого может изменяться.
5. С помощью Nuxt вы можете создавать серверные приложения (SSR), одностраничные приложения (SPA), прогрессивные веб-приложения (PWA) или просто использовать его в качестве генератора статических сайтов.
6. Vue DevTools — отличное расширение для браузера (для отладки приложений Vue и Vuex).
7. Vue Test Utils — это набор полезных утилит для тестирования компонентов Vue.
8. Vue Native — это среда JavaScript для мобильных приложений, похожая на React Native.

10. Маршрутизация

В веб-приложении JS-маршрутизатор — это функционал, синхронизирующий отображаемое в данный момент представление с содержимым адресной строки браузера.

Vue Router — официальная библиотека маршрутизации для Vue.js. Она глубоко интегрируется в фреймворк и позволяет легко создавать SPA-приложения. Всю информацию о работе с библиотекой можно найти здесь.

11. Примеры лучших проектов

Для желающих ознакомиться с грамотно разработанными vue-проектами, приведем несколько релевантных ссылок на репозитории с ними:

• ссылка 1
• ссылка 2
• ссылка 3

---

Фреймворк Vue.js прошел большой путь — от никому неизвестного частного проекта от одного человека, до популярного в мире инструмента веб-разработки с огромным сообществом. Если вы только начинаете свой путь в этом направлении, на этот легкий и быстро растущий фреймворк стоит обратить внимание.

Как всегда в конце делимся ссылками на актуальные видеоролики по теме: