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

Основные понятия

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

setup(): Это функция, которая вызывается перед созданием компонента. Здесь вы можете определять реактивные состояния, вычисляемые свойства и методы.
reactive(): Функция, которая позволяет создать реактивный объект.
ref(): Функция, которая позволяет создать реактивное примитивное значение.
computed(): Функция для создания вычисляемых свойств.
watch(): Функция для наблюдения за изменениями значений реактивных объектов.

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

Давайте рассмотрим, как можно создать простой компонент с использованием Composition API.

Пример компонента

<template>
  <div>
    <h1>Счетчик: {{ count }}</h1>
    <button @click="increment">Увеличить</button>
  </div>
</template>

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

export default {
  setup() {
    // Создаем реактивное состояние
    const count = ref(0);

    // Функция для увеличения счетчика
    const increment = () => {
      count.value++;
    };

    // Возвращаем реактивные значения и методы
    return {
      count,
      increment,
    };
  },
};
</script>

<style scoped>
h1 {
  color: blue;
}
button {
  padding: 10px;
  font-size: 16px;
}
</style>

Объяснение кода

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

В функции setup определяем реактивное состояние count с помощью ref(0), что позволяет хранить текущее значение счетчика.

Функция increment увеличивает значение счетчика. Обратите внимание, что для доступа к значению ref нужно использовать .value.

В конце функции setup мы возвращаем все реактивные значения и методы, которые мы хотим использовать в шаблоне.

Заключение

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

Предыдущий вопрос

Как собрать действия?

Следующий вопрос

Можно ли использовать вычисляемое свойство в другом вычисляемом свойстве?

Содержание:

Основные понятия

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

Заключение

Редактировать