Современный синтаксис ECMAScript 2015+

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

Пример:

const app = Vue.createApp({
  data() {
    return {
      message: 'Привет, Vue!'
    };
  }
});
app.mount('#app');

Здесь message становится реактивным свойством. Любое изменение app.message мгновенно отражается в DOM, если оно связано через директиву {{ message }}.

Шаблоны и директивы

Vue использует декларативные шаблоны, позволяя связывать данные с DOM с помощью директив:

  • v-bind — связывает атрибуты HTML с данными.
  • v-model — двусторонняя привязка данных к элементам формы.
  • v-if, v-else-if, v-else — условное отображение элементов.
  • v-for — рендеринг списков.

Пример использования:

<div id="app">
  <p v-if="isVisible">{{ message }}</p>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>
const app = Vue.createApp({
  data() {
    return {
      isVisible: true,
      message: 'Список элементов',
      items: [
        { id: 1, name: 'Элемент 1' },
        { id: 2, name: 'Элемент 2' }
      ]
    };
  }
});
app.mount('#app');

Компоненты и их структура

Компоненты позволяют разрабатывать интерфейсы модульно. Основные части компонента:

  • Props — свойства для передачи данных от родителя.
  • Data — локальные реактивные данные компонента.
  • Methods — методы, вызываемые из шаблона.
  • Computed — вычисляемые свойства, кэшируемые для оптимизации.
  • Watch — наблюдатели за изменениями данных.

Пример:

app.component('user-card', {
  props: ['user'],
  template: `
    <div class="card">
      <h2>{{ user.name }}</h2>
      <p>{{ user.age }} лет</p>
    </div>
  `
});

Использование:

<user-card :user="{ name: 'Алексей', age: 30 }"></user-card>

Реактивные вычисления и методы

Вычисляемые свойства (computed) позволяют создавать значения на основе других реактивных данных и автоматически обновляются при изменении зависимостей.

const app = Vue.createApp({
  data() {
    return { firstName: 'Иван', lastName: 'Петров' };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

Методы (methods) применяются для выполнения действий при событиях или явного вызова:

methods: {
  greet() {
    alert(`Привет, ${this.fullName}`);
  }
}

Работа с событиями

Для обработки событий используется директива v-on или сокращённая запись @:

<button @click="greet">Сказать привет</button>

Vue позволяет передавать аргументы и использовать модификаторы событий, такие как .prevent, .stop, .once для управления поведением.

<form @submit.prevent="handleSubmit">
  <input v-model="name">
  <button>Отправить</button>
</form>

Композиция API

Vue 3 представил Composition API, который упрощает масштабирование сложных компонентов. Основные функции:

  • ref() — создание реактивного примитива.
  • reactive() — создание реактивного объекта.
  • computed() — вычисляемые свойства.
  • watch() — наблюдатели.

Пример использования Composition API:

import { createApp, ref, computed } from 'vue';

const app = createApp({
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    return { count, double, increment };
  }
});

Жизненный цикл компонентов

Vue предоставляет хуки жизненного цикла:

  • beforeCreate и created — инициализация данных.
  • beforeMount и mounted — работа с DOM.
  • beforeUpdate и updated — реакция на изменения данных.
  • beforeUnmount и unmounted — очистка ресурсов.

Пример:

mounted() {
  console.log('Компонент смонтирован в DOM');
}

Работа с динамическими компонентами

Динамические компоненты позволяют подменять один компонент другим через директиву :is:

<component :is="currentComponent"></component>
data() {
  return { currentComponent: 'user-card' };
}

Переиспользуемость с композиционными функциями

Composition API позволяет выносить повторяемую логику в отдельные функции:

function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

Подключение внешних библиотек и реактивность

Vue отлично интегрируется с сторонними библиотеками благодаря реактивной системе. Любые изменения реактивных объектов автоматически отражаются в шаблонах, даже если данные обрабатываются внешними функциями.

Пример с fetch:

const data = ref([]);
fetch('https://api.example.com/items')
  .then(response => response.json())
  .then(json => data.value = json);

Итоговая структура современного Vue-компонента

import { ref, reactive, computed } from 'vue';

export default {
  name: 'ExampleComponent',
  props: ['title'],
  setup() {
    const state = reactive({ count: 0 });
    const doubled = computed(() => state.count * 2);

    function increment() {
      state.count++;
    }

    return { state, doubled, increment };
  }
}

Эта структура сочетает реактивность, вычисляемые свойства и методы, обеспечивая масштабируемость и удобство поддержки кода.

Оглавление