Введение ​

Изучайте Vue с помощью видеоуроков на VueMastery.com

Что такое Vue? ​

Vue (произносится /vjuː/, как view) — это JavaScript-фреймворк для создания пользовательских интерфейсов. Он построен поверх стандартных HTML, CSS и JavaScript и предоставляет декларативную, основанную на компонентах модель программирования, которая поможет вам эффективно разрабатывать пользовательские интерфейсы любой сложности.

Вот простой пример:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Счётчик: {{ count }}
  </button>
</div>

Результат

Приведённый выше пример демонстрирует две основные возможности Vue:

• Декларативная отрисовка: Vue расширяет стандартный HTML синтаксисом шаблонов, который позволяет нам декларативно описывать вывод HTML на основе состояния JavaScript.

• Реактивность: Vue автоматически отслеживает изменения состояния JavaScript и эффективно обновляет DOM, когда изменения происходят.

Возможно, у вас уже есть вопросы - не волнуйтесь. Мы рассмотрим все мельчайшие детали в остальной части документации. А пока читайте дальше, чтобы иметь общее представление о том, что предлагает Vue.

Прогрессивный фреймворк ​

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

• Улучшение статического HTML без этапа сборки
• Встраивание в качестве веб-компонентов на любой странице
• Одностраничное приложение (SPA)
• Fullstack / серверная отрисовка (SSR)
• Jamstack / генерация статического сайта (SSG)
• Нацеленность на настольные и мобильные компьютеры, WebGL и даже терминал

Если вас пугают эти понятия, не волнуйтесь! Учебник и руководство требуют только базовых знаний HTML и JavaScript, и вы сможете следовать им, не будучи экспертом ни в одной из этих областей.

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

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

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

В большинстве проектов Vue с инструментами сборки мы создаем компоненты Vue, используя HTML-подобный формат файлов, называемый Single-File Component (также известный как файлы *.vue, сокращённо SFC), или однофайловый компонент. Vue SFC, как следует из названия, заключает логику компонента (JavaScript), шаблон (HTML) и стили (CSS) в один файл. Вот предыдущий пример, записанный в формате SFC:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Счётчик: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Счётчик: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

SFC — это определяющая особенность Vue, и её рекомендуется использовать для разработки компонентов Vue, если ваш вариант использования требует настройки сборки. Вы можете узнать больше о том, как и почему SFC в соответствующем разделе, а пока просто знайте, что Vue выполнит за вас все настройки инструментов сборки.

Стили API ​

Компоненты Vue могут быть созданы в двух различных стилях API: Options API и Composition API.

Options API ​

С помощью Options API мы определяем логику компонента, используя объект опций, таких как data, methods и mounted. Свойства, определяемые опциями, отображаются через this внутри функций, которые указывают на экземпляр компонента:

<script>
export default {
  // Свойства, возвращаемые из data(), становятся реактивным состоянием
  // и будут доступны через `this`.
  data() {
    return {
      count: 0
    }
  },

  // Методы - это функции, которые изменяют состояние и вызывают обновления.
  // Их можно привязать к шаблонам в качестве обработчиков событий.
  methods: {
    increment() {
      this.count++
    }
  },

  // Хуки вызываются на разных этапах жизненного цикла компонента.
  // Эта функция будет вызвана, когда компонент будет смонтирован.
  mounted() {
    console.log(`Начальное значение: ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Счётчик: {{ count }}</button>
</template>

Попробовать в Песочнице

Composition API ​

С помощью Composition API мы определяем логику компонента, используя импортированные API-функции. В SFC с API Composition обычно используется <script setup>. Атрибут setup — это подсказка, которая заставляет Vue выполнять преобразования во время компиляции, что позволяет нам использовать Composition API с меньшим количеством шаблонов. Например, импорты и переменные/функции верхнего уровня, объявленные в <script setup>, можно напрямую использовать в шаблоне.

Вот тот же компонент, с точно таким же шаблоном, но с использованием Composition API и <script setup>:

<script setup>
import { ref, onMounted } from 'vue'

// реактивное состояние
const count = ref(0)

// функции, изменяющие состояние и запускающие обновления
function increment() {
  count.value++
}

// хуки жизненного цикла
onMounted(() => {
  console.log(`Начальное значение: ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Счётчик: {{ count }}</button>
</template>

Попробовать в Песочнице

Что выбрать? ​

Оба стиля API способны полностью покрыть общие случаи использования. Это разные интерфейсы, работающие на одной и той же базовой системе. Фактически, Options API реализован поверх API Composition! Фундаментальные концепции и знания о Vue являются общими для двух стилей.

В основе Options API лежит концепция «экземпляра компонента» (this, как показано в примере), что обычно лучше согласуется с ментальной моделью, основанной на классах, для пользователей, знакомых с концепцией ООП. Кроме того, он более удобен для новичков за счёт абстрагирования от деталей реактивности и организации кода с помощью групп опций.

Composition API ориентирован на объявление переменных реактивного состояния непосредственно в области видимости функции и комбинирование состояния из нескольких функций для решения сложных задач. Он более свободный и требует понимания того, как работает реактивность во Vue, чтобы использовать его эффективно. В свою очередь, его гибкость позволяет использовать более мощные паттерны для организации и повторного использования логики.

Подробнее о сравнении двух стилей и потенциальных преимуществах Composition API можно узнать в ЧаВо про Composition API.

Если вы новичок во Vue, вот наши общие рекомендации:

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

• Для использования в продакшене:

  • Выбирайте Options API, если вы не используете инструменты для сборки или планируете использовать Vue в основном в сценариях с низкой сложностью, например, для прогрессивного улучшения.

  • Выбирайте Composition API + однофайловые компоненты, если планируете создавать полноценные приложения на Vue.

На этапе обучения не обязательно придерживаться только одного стиля. В остальной части документации будут приведены примеры кода в обоих стилях, и вы сможете переключаться между ними в любое время с помощью переключателей в блоке Стиль API в верхней части левой боковой панели.

Остались вопросы? ​

Загляните в наш ЧаВо.

Выберите свой путь обучения ​

У разных разработчиков разные стили обучения. Не стесняйтесь выбирать тот путь обучения, который вам больше нравится, хотя мы рекомендуем изучить все материалы, если это возможно!