Vue.js известен своей простотой и элегантностью, и многое из этого связано с тем, как Vue работает с шаблонами и реактивностью. В этой статье мы разберем, как организовать шаблоны в Vue 3 и использовать реактивность с помощью Composition API. Погрузимся в детали, чтобы вы могли начать писать чистый и гибкий код!

Синтаксис шаблонов: как управлять интерфейсом

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

Интерполяция данных

Начнем с базовой концепции — интерполяции. Это способ вывести данные из вашего компонента на экран. Представьте, что у нас есть переменная message, и мы хотим показать её в HTML:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue 3!');
</script>

Здесь используется двойная фигурная скобка {{ message }}, чтобы вставить значение переменной прямо в HTML. Но это не просто строка — это реактивная переменная! Если message изменится, Vue автоматически обновит DOM. Например, если добавить кнопку для изменения значения:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue 3!');

const changeMessage = () => {
  message.value = 'Vue 3 is awesome!';
};
</script>

Когда вы нажмете кнопку, текст на странице мгновенно изменится, и это благодаря реактивности.

Директивы: связываем данные с HTML

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

v-bind: связывание атрибутов

Часто нам нужно динамически менять атрибуты элементов (например, классы, стили или src для изображения). Для этого используется директива v-bind.

Пример: динамически изменим атрибут src для изображения:

<template>
  <div>
    <img :src="imageUrl" alt="Vue logo">
  </div>
</template>

<script setup>
import { ref } from 'vue';

const imageUrl = ref('https://vuejs.org/images/logo.png');
</script>

Здесь :src=»imageUrl» — это сокращенная запись v-bind:src=»imageUrl». Когда значение imageUrl изменится, изменится и картинка на экране.

v-if и v-show: условная отрисовка

Не всегда нам нужно отображать все элементы на странице. Иногда нужно спрятать или показать их в зависимости от состояния приложения. Для этого в Vue есть две популярные директивы: v-if и v-show.

• v-if полностью удаляет или добавляет элемент в DOM в зависимости от условия.
• v-show только скрывает элемент (через display: none), но не удаляет его из DOM.

Пример с v-if:

<template>
  <div>
    <p v-if="isVisible">This text is visible</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(true);

const toggleVisibility = () => {
  isVisible.value = !isVisible.value;
};
</script>

В этом примере текст полностью убирается из DOM, если isVisible становится false. С v-show же текст просто скрывался бы.

v-for: отрисовка списков

Теперь поговорим о рендеринге списков. Когда у нас есть массив данных, и мы хотим отобразить их в цикле, на помощь приходит v-for.

Пример:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';

const items = ref(['Apple', 'Banana', 'Cherry']);
</script>

Здесь v-for перебирает массив items и рендерит каждый элемент списка. Обратите внимание, что для улучшения производительности нужно всегда указывать уникальный key, особенно при динамическом рендеринге.

Основы реактивности

Теперь давайте поговорим о том, что делает Vue таким удобным — о реактивности.

Что такое реактивность?

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

В Composition API реактивные данные создаются с помощью ref и reactive.

ref: простые типы

ref используется для примитивных типов данных, таких как строки, числа и булевые значения. Когда вы используете ref, Vue автоматически отслеживает изменения.

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Обратите внимание, что для доступа к значению ref мы используем count.value. Это особенность ref, и важно её помнить.

reactive: сложные объекты

Когда вам нужно сделать реактивным объект или массив, на помощь приходит reactive.

<script setup>
import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 25
});

const celebrateBirthday = () => {
  user.age++;
};
</script>

<template>
  <div>
    <p>{{ user.name }} is {{ user.age }} years old.</p>
    <button @click="celebrateBirthday">Happy Birthday!</button>
  </div>
</template>

Теперь объект user реактивен, и любые изменения в нём будут автоматически обновлять интерфейс.

Как работает реактивность

Vue использует систему трекеров, которая следит за изменениями реактивных переменных. Когда Vue рендерит компонент, он «запоминает» все зависимости (реактивные переменные, которые использовались). Когда какая-то из этих переменных изменяется, Vue знает, что нужно перерендерить компонент.

Заключение

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

В этой статье мы разобрались с основами: как выводить данные через интерполяцию, как работать с директивами и как создавать реактивные переменные с помощью Composition API. Это фундамент, на котором строится любой Vue.js проект.

Дальше мы углубимся в более сложные темы, такие как вычисляемые свойства и наблюдатели.