Что такое mixin'ы Vue? Каковы их недостатки по сравнению с composable'ами?

Что такое миксины Vue

Миксин (mixin) — объект с опциями компонента (data, methods, computed, хуки жизненного цикла), который можно «подмешать» в любой компонент Vue через свойство mixins: []. Опции объединяются по правилам слияния: хуки жизненного цикла вызываются последовательно (сначала миксин, потом компонент), остальные свойства — компонент выигрывает при конфликте.

// mixins/useTimestamp.js
export const timestampMixin = {
  data() {
    return { createdAt: null };
  },
  created() {
    this.createdAt = new Date().toISOString();
  },
  methods: {
    formatDate(date) {
      return new Date(date).toLocaleDateString('ru-RU');
    }
  }
};

// Component.vue
import { timestampMixin } from './mixins/useTimestamp';
export default {
  mixins: [timestampMixin],
  mounted() {
    console.log(this.createdAt);   // доступно из миксина
    console.log(this.formatDate(this.createdAt));
  }
};

Ключевые проблемы миксинов

• Неявный источник данных. Когда компонент использует несколько миксинов, невозможно сразу понять, откуда взялось свойство this.someValue — нужно смотреть каждый миксин.
• Конфликты имён. Два миксина с методом reset() — один молча перезапишет другой или будет вызван только один из хуков. Нет явного предупреждения об этом.
• Невозможно передать параметры. Миксин — статический объект. Нельзя написать createMixin(prefix) стандартным способом без фабрики.
• Глобальные миксины опасны. Vue.mixin({...}) применяется к каждому компоненту приложения, включая сторонние библиотеки.

Composable-функции как замена

В Vue 3 Composition API логика выносится в обычные функции (composables), которые используют ref, reactive, хуки жизненного цикла внутри setup(). Источник каждого значения явно виден в деструктуризации.

// composables/useTimestamp.js
import { ref, onMounted } from 'vue';

export function useTimestamp(prefix = '') {
  const createdAt = ref(null);

  onMounted(() => {
    createdAt.value = new Date().toISOString();
  });

  function formatDate(date) {
    return `${prefix}${new Date(date).toLocaleDateString('ru-RU')}`;
  }

  return { createdAt, formatDate };
}

// Component.vue  (script setup)
import { useTimestamp } from './composables/useTimestamp';
import { useUserInfo }  from './composables/useUserInfo';

// Конфликт имён невозможен — у каждого своя переменная
const { createdAt, formatDate } = useTimestamp('Создано: ');
const { userId }                = useUserInfo();

Сравнительная таблица

• Источник данных: миксин — неявный (this.x непонятно откуда); composable — явный (имя переменной из деструктуризации).
• Параметры: миксин — нет; composable — обычные аргументы функции.
• Конфликты имён: миксин — молчаливые; composable — невозможны.
• TypeScript: миксин — слабая поддержка; composable — полная, inference работает из коробки.
• Тестирование: миксин — нужен компонент-обёртка; composable — вызывается как обычная функция в тесте.

Подводные камни

• Миксины с одноимёнными data-полями не выдают ошибку — данные компонента просто перекрывают данные миксина без предупреждения.
• Хуки жизненного цикла из миксина вызываются до хуков компонента — порядок неочевиден при дебаггинге.
• Глобальный миксин (app.mixin() в Vue 3) применяется ко всем компонентам, включая те, что внутри node_modules.
• Composable нельзя вызывать условно или внутри обычной функции — только верхний уровень setup() или другой composable.
• Если composable возвращает реактивный объект через reactive(), деструктуризация разрушает реактивность — нужен toRefs().
• Миксины в Vue 3 официально поддерживаются, но не рекомендованы — в будущих мажорных версиях могут быть помечены устаревшими.
• Циклические зависимости между composable-функциями (A импортирует B, B импортирует A) приводят к runtime-ошибкам, которые сложно отследить.

• Складывать сквозную бизнес-логику в общий mixin и обнаруживать конфликты имён через полгода.
• Считать, что mixin даёт изоляцию данных — нет, они сливаются.
• Пытаться типизировать this для нескольких mixin'ов вручную.
• Перенести в Vue 3 mixin-первый стиль вместо постепенного перехода на composables.

• Может описать механизм слияния mixins.
• Знает основные проблемы (имена, типы, неявность).
• Понимает, что в Vue 3 composables — рекомендованная альтернатива.
• Видит сценарий миграции: переписывать новые компоненты на composables.