Что такое composables и чем они лучше mixins?

Composable — функция, которая использует Composition API и возвращает реактивное состояние и методы для переиспользования логики.

Пример

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  const x = ref(0);
  const y = ref(0);
  const update = (e) => { x.value = e.pageX; y.value = e.pageY; };

  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));

  return { x, y };
}

// компонент
const { x, y } = useMouse();

Преимущества перед mixins

• Источник каждого значения виден: const { x } = useMouse(), а в mixin непонятно, откуда взялось поле.
• Нет конфликтов имён: можно переименовать при деструктуризации.
• Можно передавать параметры и комбинировать несколько composables.
• Хорошая типизация в TypeScript.

Соглашения

Имя начинается с use. Не следует вызывать composable вне setup, если он использует хуки жизненного цикла. Готовая коллекция — библиотека VueUse.

Коротко для собеседования

Composable — функция с реактивной логикой. Она прозрачнее и безопаснее, чем mixin, поэтому mixins вытеснены.