Что такое Vue и что он может

Vue - это современный Javascript фреймворк для создания интерактивных компонентов для веб-сайтов, CRM систем и других интернет приложений.

Автор фреймворка - Эван Ю, работал в Гугл, в том числе используя библиотеку AngularJS. Создать Vue его побудила мысль — «Я могу вырезать из Angular только то, что мне нравится, и получить очень легкий аналог».

Первая версия была выпущена в феврале 2014 г. Актуальная версия Vue — 3.2.

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

<Photo />

Основа Vue - это компонент. Базовый компонент выглядит так:

<template>
	<img src='/my-photo.png' />
	<span> {{ likes }} </span>
</template>
<script>
export default {
	data() {
		return {
			likes: 0
		};
	}
}
</script>

Компонент состоит из шаблона template и кода Javascript, включающего хранилище состояния (и данных) компонента. Vue - реактивный фреймворк. Это значит, что когда изменяется значение параметра состояния компонента (likes), компонент обновляется (пере-рендерится, то есть пере-рисовывается). Этот процесс требует большого количества расчетов, чтобы обновлять только те части шаблона, которые поменялись. Фреймворк Vue хорошо оптимизирован, и позволяет создавать сложные приложения из множества компонентов, которые работают без тормозов.

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

<template>
	<img src='/my-photo.png' />
	<span v-if=' likes > 0 '> {{ likes }} </span>
	<span v-else>Нет лайков :-(</span>
</template>

Есть директивы для циклов (построение списков), классов, стилей. А для взаимодействия с пользователем есть директива v-on, по которой компонент реагирует на события:

<template>
	<img src='/my-photo.png' />
	<span v-if=' likes > 0'> {{ likes }} </span>
	<span v-else>Нет лайков :-(</span>
	<button v-on:click="like">Поставить лайк</button>
</template>
<script>
export default {
	data() {
		return {
			likes: 0
		};
	},
	methods() {
		like() {
			this.likes += 1;
		}
	}
}
</script>

Клик на кнопке button вызывает метод компонента like(), у которого есть доступ ко всем свойствам компонента. Изменение свойства автоматически приводит к перерисовке компонента - это называется реактивное поведение.

Сравнение с ReactJs

По своей архитектуре Vue очень похож на React. Такое же разделение шаблона и кода, виртуальный DOM, реактивные компоненты и фокус на основных возможностях (роутинг, управление данными перекладываются на библиотеки экосистемы фреймворков). Однако, есть и несколько принципиальных отличий.

Во первых, Vue берёт на себя задачу отслеживания изменения данных в компоненте и оптимизацию рендеринга вложенных компонентов (привет, shouldComponentUpdate из React). Кому-то это будет в минус, - но для многих - позволяет фокусироваться на решаемой задаче, а не на технических особенностях фреймворка.

Во вторых, немного отличается подход к заданию CSS стилей в компонентах. React основан на CSS-через-JS решениях (стили задаются через JS методы), а Vue позволяет писать обычных CSS код, который будет ограничен областью видимости именно этого компонента автоматически (что, согласитесь, очень удобно!).

В третьих, Vue можно запустить в режиме "интерпретатора" (то есть, без фазы компиляции кода) на любой странице существующего сайта. Добавьте подключение Vue из CDN - и пишите код для Vue!

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Сравнение с Angular

Во первых, Angular (речь про Angular 2) работает только на TypeScript. TypeScript - это лучшее, что произошло с Js, но не все его освоили, или активно используют. Строгая система типов заставляет усложнять простые вещи, хоть и упрощает сложные... Vue позволяет использовать и тот, и другой язык программирования без проблем.

Во вторых, Vue+библиотека роутинга+библиотека управления состоянием (~30Кб) в собранном и сжатом виде почти в 2 раза меньше, чем аналогичный по функционалу Angular (~65Кб). А размер - это в первую очередь скорость загрузки страницы, на медленном интернете, на мобильных устройствах...

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

Библиотеки для VueJs

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

Самые популярные из них:

• Vuetify (opens new window) - библиотека с сотнями компонентов (кнопок, панелей, модальных окон) в стиле "Материального дизайна"
• NuxtJS (opens new window) - фреймворк, включающий инфраструктуру для построения веб приложений на Vue, включающий роутинг, режимы рендеринга SSR (рендеринг на сервере) и SSG (статический рендеринг), PWA (сборка прогрессивного веб-приложения для мобильных), подключение данных по внешним API, настройки для SEO - и многое другое.
• Vuex (opens new window) - библиотека хранения данных, которая нужна для больших веб приложений, когда хранить все данные по разным компонентам становится сложно. Для Vue 3 официально рекомендуется другая библиотека - Pinia (opens new window).
• VuePress (opens new window) - фреймворк для создания статических сайтов.
• Vue ChartJS (opens new window) - библиотека с компонентами графиков на базе популярного Chart.js