Переиспользуемая логика

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

Миксины

Миксины — это объекты, содержащие свойства компонентов, методы, вычисляемые свойства и хуки жизненного цикла. При подключении миксина к компоненту его содержимое автоматически интегрируется в компонент.

Пример миксина:

// mixins/logger.js
export const loggerMixin = {
  data() {
    return {
      logMessages: []
    };
  },
  methods: {
    log(message) {
      this.logMessages.push(message);
      console.log(message);
    }
  },
  created() {
    this.log('Компонент создан');
  }
};

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

Особенности миксинов:

  • При конфликте методов и данных компонента с миксином, приоритет отдаётся компоненту.
  • Миксины могут использоваться многократно, но при большом количестве может возникнуть непрозрачность логики из-за сложного наследования.

Композиционные функции

С введением Vue 3 и Composition API, композиционные функции стали предпочтительным способом переиспользования логики. Они представляют собой обычные функции JavaScript, которые возвращают реактивные данные, методы и вычисляемые свойства.

Пример композиционной функции:

// composables/useCounter.js
import { ref } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

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

  function decrement() {
    count.value--;
  }

  return { count, increment, decrement };
}

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

Преимущества композиционных функций:

  • Логика полностью изолирована от компонентов.
  • Проще тестировать и документировать.
  • Лёгкая интеграция с TypeScript и другими библиотеками.

Пользовательские хуки

Пользовательские хуки — это разновидность композиционных функций, но они ориентированы на реактивность и управление состоянием. Хуки помогают организовать логику, связанную с жизненным циклом компонента, асинхронными запросами и побочными эффектами.

Пример пользовательского хука для API-запроса:

// composables/useFetch.js
import { ref } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  const loading = ref(false);

  async function fetchData() {
    loading.value = true;
    error.value = null;
    try {
      const response = await fetch(url);
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  }

  return { data, error, loading, fetchData };
}

Применение в компоненте:

Ключевые моменты хуков:

  • Доступ к реактивным объектам и методам через Composition API.
  • Можно комбинировать несколько хуков внутри одного компонента.
  • Улучшается читаемость и повторное использование логики.

Выбор подхода

  • Миксины удобны для простых проектов или существующего кода на Vue 2, где нужно быстро делиться методами и данными между компонентами.
  • Композиционные функции и хуки — предпочтительный подход в современных проектах на Vue 3, особенно если важна модульность и тестируемость кода.

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

Оглавление