Повторное использование логики в Vue: composables вместо миксинов

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

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

Было ли это всегда так

До Vue 3 разработчики использовали mixins для того, чтобы захватывать куски логики и переиспользовать их в разных частях приложения. Mixins содержали опции Vue, такие как data, methods и lifecycle hooks, что позволяло использовать общий набор поведения в нескольких компонентах.

Чтобы создать mixin, его обычно выносили в отдельный файл и подключали к компоненту через свойство mixins в объекте опций компонента. Пример mixin для валидации формы (исходный код):

// formValidation.js  
export const formValidationMixin = {  
  data() {  
    return {  
      formData: {  
        username: '',  
        password: '',  
      },  
      formErrors: {  
        username: '',  
        password: '',  
      },  
    };  
  },  
  methods: {  
    validateForm() {  
      this.formErrors = {};  
    
      if (!this.formData.username.trim()) {  
        this.formErrors.username = 'Username is required.';  
      }  
    
      if (!this.formData.password.trim()) {  
        this.formErrors.password = 'Password is required.';  
      }  
     
      return Object.keys(this.formErrors).length === 0;  
    },  
  },  
};  

Этот фрагмент показывает mixin для валидации формы. Он содержит два свойства data — formData и formErrors — изначально пустые. formData хранит данные полей формы, а formErrors — сообщения об ошибках.

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

Пример использования mixin в компоненте (исходный код):

Этот пример показывает компонент, написанный в Options API, где через свойство mixins подключается общая логика валидации.

Как использовать composables

Composable — это автономный JavaScript-файл с функциями, предназначенными для конкретной задачи. Внутри composable вы обычно используете Composition API Vue (ref, reactive, computed и пр.).

Composables возвращают объекты (или функции), которые вы импортируете и используете внутри setup() компонента. Для удобства в больших проектах стоит группировать composables по папкам и давать им имена, отражающие назначение.

Ниже показан тот же пример валидации формы, переписанный как composable (исходный код):

// formValidation.js  
import { reactive } from 'vue';  
  
export function useFormValidation() {  
  const state = reactive({  
    formData: {  
      username: '',  
      password: '',  
    },  
    formErrors: {  
      username: '',  
      password: '',  
    },  
  });  
  
  function validateForm() {  
    state.formErrors = {};  
  
    if (!state.formData.username.trim()) {  
      state.formErrors.username = 'Username is required.';  
    }  
  
    if (!state.formData.password.trim()) {  
      state.formErrors.password = 'Password is required.';  
    }  
  
    return Object.keys(state.formErrors).length === 0;  
  }  
  
  return {  
    state,  
    validateForm,  
  };  
}  

Пример использования composable в компоненте (исходный код):

  
  
  
import { useFormValidation } from "./formValidation.js";  
import { ref } from "vue";  
const { state, validateForm } = useFormValidation();  
  
const submitForm = () => {  
  if (validateForm()) {  
    alert("Form submitted successfully!");  
  } else {  
    alert("Please correct the errors in the form.");  
  }  
};  
  
  
  

После импорта useFormValidation мы деструктурируем возвращаемый объект и используем state и validateForm в компоненте.

Почему composables лучше миксинов

• Явная область видимости: composable возвращает явный набор свойств и функций, которые вы импортируете, вместо неявного слияния опций миксина и компонента. Это уменьшает риск конфликтов имён.
• Тестируемость: composable — обычная функция JS, её проще тестировать отдельно.
• Композиция: вы можете комбинировать несколько composables внутри одного компонента без сложной логики разрешения приоритетов.
• Переиспользуемость вне Vue: composable можно использовать в доменных библиотеках и утилитах при необходимости.

Когда composables не подходят

Важно понимать, что composables не решают все задачи. Рассмотрите использование mixins или других подходов в следующих случаях:

• Вы поддерживаете старый проект на Vue 2, где migration cost высок (в этом случае mixins остаются рабочим решением).
• Вам нужно автоматически смешивать опции при глобальной настройке через плагины — для этих сценариев mixins/плагины могут быть удобнее.
• Когда требуется декларативное поведение, сильно завязанное на lifecycle-хуки Options API, и нет времени на рефакторинг.

Важно: при переходе с mixins на composables протестируйте компоненты на предмет побочных эффектов и конфликтов имён состояний.

Практические приемы и эвристики

• Именуйте composables как useX, например useFormValidation, useAuth, usePagination. Это сигнализирует о контракте функции.
• Держите composable мелкими: одна ответственность = одна функция. Если composable растёт — разбейте его.
• Возвращайте минимально необходимое API: state, методы и вычисляемые значения, не все внутренности.
• Для состояния, которое разделяется между компонентами и должно быть единым источником правды, используйте отдельный store (Pinia/Vuex) или provide/inject.

Ментальная модель: воспринимайте composable как «микросервис логики» внутри фронтенда — модульный блок, который можно подключать по потребности.

Альтернативные подходы

• Options API + mixins: быстрый способ для Vue 2 или для маленьких патчей.
• Provide / Inject: хороши для передачи зависимости вниз по дереву, когда не хочется прокидывать props через многие уровни.
• State management (Pinia/Vuex): используйте, когда нужно централизованное состояние с SSO/кешированием/персистенцией.
• Хелперы и утилиты: вынесите «чистую» логику (валидация, форматирование дат) в отдельные утилитарные функции без привязки к Vue.

Чек-листы по ролям

Разработчик компонента:

• Реализовать только UI и поведение, специфичное для компонента.
• Перенести повторяющуюся логику в composable.
• Импортировать только необходимое из composable.

Ведущий разработчик:

• Утвердить структуру папки для composables (например, src/composables/).
• Проверить соглашения по именованию и покрытие тестами.

Архитектор:

• Определить границы ответственности между composables и store.
• Установить критерии приёмки для миграции миксинов.

Критерии приёмки

• Повторно используемая логика вынесена в composable и импортируется в компоненты.
• Компоненты не содержат дублирующейся логики валидации/загрузки данных/форматирования.
• Существующие юнит-тесты обновлены для тестирования composable, а не миксинов.
• Нет побочных эффектов (manually tested flows) после рефакторинга.

Быстрая методология миграции миксина в composable

1. Найдите границы состояния и методов в миксине.
2. Создайте файл useX.js в папке composables.
3. Создайте reactive/ref состояние внутри composable и перенесите методы.
4. Верните только публичный API (state, функции).
5. Обновите компоненты на использование setup и импорт composable.
6. Напишите или обновите тесты.
7. Удалите устаревшие миксины после проверки.

Пример: когда composable не заменит store

Если вам нужно глобальное состояние приложения (аутентификация, корзина покупок, синхронизация между вкладками), используйте Pinia или Vuex. Composable удобно инкапсулирует логику, но не всегда заменяет централизованный store с его инструментами (плагины, персистентность, devtools).

Мини‑чеклист безопасности и приватности

• Не храните секреты (API-ключи) в composables в клиентском коде.
• Для персональных данных применяйте минимизацию и маскирование до отправки/логирования.
• Убедитесь, что composable не экспортирует чувствительные данные на глобальный scope.

Глоссарий одной строкой

• composable: функция, использующая Composition API Vue для повторного использования логики; возвращает состояние и методы.
• mixin: набор опций Vue (data/methods/hooks), который смешивается с компонентом.
• reactive/ref: примитивы Composition API для реактивного состояния.

Когда стоит оставаться на mixins

• Поддержка legacy-кода и отсутствие ресурсов на миграцию.
• Быстрая интеграция общих хуков в простой прототип.

Важно: планируйте миграцию поэтапно — начните с новых фич и постепенно рефакторьте наиболее проблемные места.

Итог

Composables — современный и гибкий способ повторного использования логики в Vue 3. Они улучшают читаемость, облегчают тестирование и уменьшают риск конфликтов имён. Для крупных приложений стоит установить стандарты по папкам, именованию и покрытию тестами, а также использовать store для действительно глобального состояния.

Ключевые шаги на практике: выделите логику в composable, держите API минимальным, тестируйте отдельно и обновляйте компоненты через setup.

Важно: не гонитесь за идеалом — оценивайте стоимость миграции и применяйте composables там, где выигрыш очевиден.