Композиция функций

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

Что такое композиция функций?

В контексте Petite-Vue композиция функций заключается в объединении различных функций для создания компонентов. Это позволяет легко управлять состоянием, поведением и реактивностью, разделяя логику приложения на небольшие, многократно используемые части. В отличие от классического подхода, где все элементы (данные, методы, жизненный цикл) находятся в одном объекте, композиция позволяет изолировать и повторно использовать каждый аспект приложения.

Основы композиции

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

const MyComponent = defineComponent(() => {
  const count = ref(0);

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

  return {
    count,
    increment
  };
});

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

Роль reactive и ref

Petite-Vue, как и Vue.js, использует два основных способа создания реактивных данных: reactive и ref.

  • ref используется для создания реактивных примитивных значений (например, чисел, строк).
  • reactive применяется для создания реактивных объектов и массивов.
const state = reactive({
  name: 'John',
  age: 30
});

const count = ref(0);

В обоих случаях данные остаются реактивными, и любые изменения в этих значениях автоматически обновляют связанные с ними участки интерфейса.

Использование хуков

Хуки — это функции, которые позволяют управлять состоянием, жизненным циклом компонента и побочными эффектами. В Petite-Vue есть несколько основных хуков, таких как onMounted, onUpdated, onUnmounted. Эти функции позволяют обработать момент монтирования, обновления и размонтирования компонента.

const MyComponent = defineComponent(() => {
  const count = ref(0);

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

  onUpdated(() => {
    console.log('Компонент обновлен');
  });

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

  return {
    count,
    increment
  };
});

В этом примере onMounted и onUpdated регистрируют колбэки, которые выполняются при монтировании и обновлении компонента соответственно.

Обработка побочных эффектов с watch и computed

Для управления побочными эффектами и вычисляемыми значениями в Petite-Vue используются два ключевых инструмента: watch и computed.

  • watch позволяет отслеживать изменения реактивных данных и выполнять действия на основе этих изменений.
const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Значение изменилось с ${oldValue} на ${newValue}`);
});
  • computed используется для создания вычисляемых свойств, которые автоматически пересчитываются при изменении зависимостей.
const count = ref(0);

const doubledCount = computed(() => count.value * 2);

В данном примере doubledCount будет автоматически обновляться при изменении count.

Организация логики через композицию

Часто полезно разделить логику приложения на несколько частей, чтобы сделать код более модульным и повторно используемым. В Petite-Vue композиция позволяет легко интегрировать различные функции для разделения задач. Например, можно выделить логику для обработки форм, управления состоянием или работы с API в отдельные функции.

function useForm() {
  const formData = reactive({
    name: '',
    email: ''
  });

  function submitForm() {
    console.log('Форма отправлена', formData);
  }

  return {
    formData,
    submitForm
  };
}

const MyComponent = defineComponent(() => {
  const { formData, submitForm } = useForm();

  return {
    formData,
    submitForm
  };
});

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

Передача данных и методов между компонентами

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

function useStore() {
  const count = ref(0);

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

  return {
    count,
    increment
  };
}

const Store = useStore();

const MyComponent = defineComponent(() => {
  return {
    count: Store.count,
    increment: Store.increment
  };
});

Здесь компонент MyComponent использует глобальное хранилище Store, которое можно передавать и использовать в разных частях приложения.

Преимущества композиции

Использование композиции функций в Petite-Vue дает несколько значительных преимуществ:

  • Чистота кода: Логика каждого компонента изолирована в небольших, понятных функциях.
  • Повторное использование: Функции можно переиспользовать в разных частях приложения, что упрощает расширение функционала.
  • Тестируемость: Логика, вынесенная в функции, легче поддается юнит-тестированию.
  • Гибкость: Композиция позволяет более гибко управлять состоянием и поведением компонента, легко изменяя его функциональность.

Таким образом, композиция функций является ключевым инструментом при разработке на Petite-Vue, позволяя создать приложения, которые легко расширять, тестировать и поддерживать.

Оглавление