Когда-то фронтенд был как варево из всего подряд: HTML, CSS, JavaScript — всё вперемешку, без правил и архитектуры. Писали как попало, читали чужой код с молитвой. Тогда не было компонентов, реактивности, даже слово “SPA” никто не знал. Потом пришли фреймворки. И стало легче, но не сразу.

Vue.js — один из тех, что пришёл без амбиций “переписать мир”, но стал рабочей лошадкой. Без надменности React, без тяжеловесности Angular. Просто берёшь и работаешь. Особенно удобно, когда проект уже написан, но хочется что-то сделать по уму, а не всё сразу перепиливать.

Что такое Vue.js

Vue (читается как "вью", типа «вид») — фреймворк для построения UI. Работает по MVVM (Model-View-ViewModel), если тебе это что-то говорит. Если не говорит — не страшно, всё равно ты будешь писать компонент за компонентом, и оно будет работать.

Автор — Эван Ю, бывший гуглер. Сейчас проект поддерживает сообщество, без корпораций и прочей шелухи. Vue уже давно не игрушка, его используют Baidu, Xiaomi и прочие китайские монстры.

Почему Vue бывает удобен

Вот краткий список, почему Vue не бесит:

  • пишешь быстро, работает стабильно
  • весит мало, не требует ядерного реактора
  • дока — человеческая, не надо читать RFC
  • сообщество большое, есть решения на всё
  • виртуальный DOM работает, не тормозит
  • компоненты — как лего, только без боли
  • SSR можно прикрутить через Nuxt, если совсем прижмёт

Ключевые фичи Vue

Реактивность

Когда данные меняются — UI сам обновляется. Без ручного обновления DOM, без jQuery-говнокода. Всё работает как будто само. В реальности — за счёт прокси и наблюдателей.

var vm = new Vue({
  data: {
    seen: true
  }
})

Теперь seen можно менять, и Vue сам обновит интерфейс. Ну, почти магия.

Экземпляр Vue

Всё начинается с new Vue(...). Это и есть точка входа. Указываешь el, data, методы — и у тебя уже что-то работает.

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Привет, Vue!'
  }
})

Сюда же потом добавятся компоненты, роутинг, анимации, ад и пламя. Но поначалу — всё просто.

Компоненты

Компоненты — главная фишка. Вместо кучи мусора в одном файле — делишь всё на куски. Каждый кусок сам за себя отвечает. Хоть повторно используй, хоть выбрасывай — никто никому не мешает.

Vue даёт три способа разделения кода:

  • Постранично — каждая страница — компонент, грузится по требованию.
  • Вне видимости — подгружаешь только то, что реально видно. Типа “ленивой загрузки”.
  • По условию — показываешь контент в зависимости от условий (группа пользователя, статус, клик и т.п.).

Вот пример простого роутинга:

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: { currentRoute: window.location.pathname },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

Да, без Vue Router, просто руками. Иногда и так норм.

Директивы

Специальные атрибуты с v-. Например:

<p v-if="seen">Я видим</p>

Когда seen = false, элемент исчезает. Просто и понятно. Есть v-for, v-model, v-bind и куча других — учатся за день.

Анимации и переходы

Хочешь плавности — получай. Vue даёт встроенные transition-хуки, можно прикручивать CSS, Velocity.js, Tween.js, хоть animate.css.

Пример на Tween.js — анимация числа:

watch: {
  number: function(newValue, oldValue) {
    new TWEEN.Tween({ tweeningNumber: oldValue })
      .to({ tweeningNumber: newValue }, 500)
      .onUpdate(function () {
        vm.animatedNumber = this.tweeningNumber.toFixed(0)
      })
      .start()
  }
}

Надо — работает. Не надо — не трогай, живи спокойно.

Стоит ли учить Vue?

Если ты:

  • не хочешь сразу лезть в React
  • работаешь над проектом, где нужна постепенная миграция
  • ценишь понятность и скорость старта

— Vue норм. Это не “лучший фреймворк”, это просто удобный инструмент. Дальше можешь уйти в Nuxt, Pinia, Vuex, Vite — но всё это необязательно.

Вместо вывода

Vue — как отвертка: может всё, если не пытаться сверлить бетон. Прост в освоении, удобен в поддержке, не требует жертвоприношений. С него можно начать, им можно жить, но и уйти в другой стек тоже не зазорно. Не фанатей. Пиши код.