Vue — один из самых популярных фреймворков для создания фронтенда и ближайший конкурент React. Расскажем, из чего он состоит, какие имеет преимущества и стоит ли его изучать в 2024 году.
Знания JavaScript достаточно для того, чтобы написать фронтенд сайта. Но современные интерфейсы усложнились, поэтому чтобы оптимизировать процессы используют фреймворки. Это своеобразные каркасы приложений, которые включают в себя самые популярные сценарии и функции.
За счет этого разработчику достаточно написать всего пару строчек кода вместо сотен или даже тысяч.
Один из самых популярных фреймворков для JS — Vue. Расскажем, как он появился и чем интересен.
Этот фреймворк — детище Эвана Ю, программиста из Google. Он создал Vue в 2012 году в качестве пет-проекта. Но известность технология получила только в 2015.
Тогда основатель фреймворка Laravel Тейлор Отвелл написал, что решил изучать Vue, потому что React показался ему слишком сложным.
Это определило популярность фреймворка среди PHP-разработчиков, которые первыми начали активно применять его для создания пользовательских интерфейсов.
Название фреймворк получил от слова «view», то есть связи модели и отображения.
Vue — опенсорс-проект, его исходный код открыт и распространяется бесплатно. А доработкой его инструментов занимаются программисты со всего мира.
Интересный факт: долгое время Vue был рекордсменом по количеству звезд на GitHub. Сейчас его сместили с пьедестала, но он по-прежнему обладает максимальной народной поддержкой среди фреймворков.
Основные области применения Vue:
Сейчас многие крупные коммерческие компании применяют Vue как основной фреймворк для фронтенда. К ним относятся Alibaba, 9GAG, Nintendo, Zoom, Ozon и Upwork.
Но еще больше организаций используют его для отдельных компонентов. Даже гиганты вроде Google периодически ищут фронтендеров со знанием Vue.js.
По данным исследования Stack Overflow он занимает восьмое место в рейтинге самых популярных фреймворков и четвертое место среди веб-технологий.
По состоянию на июнь 2024 года на hh.ru опубликовано 1868 вакансий, в которых упоминается Vue.
По данным «Хабр.Карьеры» фреймворк входит в большую четверку самых популярных технологий для фронтенда.
Средний уровень зарплаты разработчиков с знанием Vue:
Главная особенность фреймворка — его реактивность. То есть у программиста есть не только набор готовых шаблонов, но и возможность получать изменения в реальном времени.
Это позволяет не обновлять страницу в браузере после внесения изменений, а сразу получать новые данные.
Такая особенность позволяет с одной стороны ускорить разработку, с другой — увеличивает скорость загрузки приложения для пользователя. Справедливости ради, реактивность — практически универсальное качество современного фреймворка.
Но у Vue есть и другие преимущества:
Этот фреймворк относительно легко выучить тем, кто уже знает JS, CSS и HTML. Его основные концепции легки для понимания, а работоспособный код можно начинать писать буквально с первых недель обучения. Для сравнения, изучение React отнимет гораздо больше времени.
Это одна из причин, обеспечивающих простой вход. Этот фреймворк хорошо задокументирован. Фактически документации будет достаточно для обучения.
Сейчас информацию о нем можно найти в подробном описании API, которое сопровождают примеры приложений и рекомендации. Также есть FAQ с часто задаваемыми вопросами и описание главных библиотек и инструментов.
Vue привлекает разработчиков своим скромным весом, что позволяет приложениям на нем загружаться сравнительно быстро. Вес фреймворка всего 20 Кб, поэтому он дает быстродействие ресурсов на современном уровне.
Одна из самых примечательных особенностей Vue — возможность легкого модульного внедрения. Не обязательно создавать на нем все приложение. Его можно использовать для отдельных элементов. Например, только для интерфейса онлайн-чата или формы авторизации.
При этом компоненты на Vue будут без проблем взаимодействовать с другими частями приложения, написанными на иных фреймворках.
Это позволяет осуществлять плавный переход с устаревших технологий, например, jQuery на Vue без необходимости заменять весь код разом.
Здесь мы расскажем о главных концепциях фреймворка и особенностях его экосистемы.
Компоненты в Vue.js — отдельные блоки кода, которые объединяют в себе HTML, CSS и JavaScript и могут быть многократно использованы на странице. Каждый компонент имеет свою область видимости и может быть полностью независимым от других компонентов. Например, создадим компонент кнопки.
<template>
<button @click="onClick">{{ buttonText }}</button>
</template>
<script>
export default {
data() {
return {
buttonText: 'Нажми меня'
};
},
methods: {
onClick() {
alert('Кнопка была нажата');
}
}
};
</script>
<style scoped>
button {
background-color: #42b983;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
Это HTML-код, который используют для описания структуры компонента. В шаблонах можно применять директивы, фильтры и другие возможности Vue.js. Например, создадим простой шаблон для списка дел:
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
</template>
И скрипт к нему:
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Сходить в магазин' },
{ id: 2, text: 'Погулять на свежем воздухе' },
{ id: 3, text: 'Почитать книгу' }
]
};
}
};
</script>
Переходы в Vue.js — механизм, который позволяет добавлять анимацию при изменении состояния элементов на сайте. Их используют для плавного появления, исчезновения или изменения элементов на странице, делая пользовательский опыт более привлекательным и интерактивным.
Переходы включают в себя несколько основных элементов, среди которых:
Например, можно использовать директиву v-if для плавного появления и исчезновения элемента:
<transition name="fade">
<p v-if="isShown">Этот текст появится с эффектом fadeIn</p>
</transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0;
}
</style>
Директивы во Vue.js — это специальные атрибуты, которые добавляют к DOM элементам и используют для управления их поведением. Они позволяют взаимодействовать с элементами на странице, изменять их видимость, содержимое или добавлять различные эффекты.
Основные виды директив в Vue.js:
Например, директива v-for позволяет создавать списки элементов на основе данных из массива:
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>
Это специальные функции, которые помогают преобразовывать данные перед их отображением в шаблоне. Например, можно использовать фильтр для форматирования даты:
<span>{{ date | formatDate }}</span>
filters: {
formatDate(date) {
return new Date(date).toLocaleDateString();
}
}
Сейчас React — ближайший конкурент Vue. Он появился раньше и пользуется большей популярностью на рынке. При этом создатель Vue долгое время работал именно на нем. Так что во многом эти две технологии похожи.
Но они различаются по многим параметрам.
Например, обе технологии помогают разработчикам создавать реактивные сайты. Но в React ее реализуют на основе виртуального DOM, поэтому исходный код в нем менять сложнее.
А Vue дает возможность программисту работать с DOM напрямую и менять данные через события. Это позволяет упростить процесс внесения изменений и дает больше свободы действий разработчику. Но последнее может стать и источником ошибок.
Зато Vue однозначно лучше работает со сложно-синхронизированной анимацией.
Также этот фреймворк удобнее для дизайнеров за счет возможности виртуально представить шаблон. А в React это можно сделать только через JSX. Правда за счет такой особенности код получается короче.
Еще одна сильная сторона Vue — изоморфные приложения на JS. Он предлагает более простую синхронизацию с данными.
Это вторая конкурирующая технология, которую рассматривают начинающие фронтенд-разработчики.
Если сравнивать с Angular, Vue однозначно обеспечивает большую гибкость. Его легко применять как дополнительный инструмент на проекте, создавая на нем отдельные модули. А Angular придется внедрять целиком.
Также Vue считается более простым для обучения с одной стороны, и лучше оптимизированным с другой.
Но у Angular есть и свои преимущества. Например, наличие ajax-функции и маршрутизации. У Vue эти возможности можно реализовать только через сторонние библиотеки.
Начинающий разработчик на JS должен выучить хотя бы один из популярных фреймворков, без этого найти работу на современном рынке будет проблематично.
Самым популярным решением считают React, так как он безусловный лидер по количеству вакансий.
Но у Vue по сравнению с ним есть ряд преимуществ. Главная — это простота и возможность точечного применения. За счет низкого порога входа, многие выбирают этот фреймворк.
Его легко выучить и уже через несколько недель использовать на своих первых проектах. Здесь на первый план выходит его компактность и дружелюбие к другим технологиям.
В целом Vue.js — один из самых популярных фреймворков для веб-разработки и на него точно имеет смысл обратить внимание.