Разница между composable-функциями Vue 3 и модулями JS
Обе концепции позволяют разделять код, но они решают разные задачи. Давай разберёмся, что к чему.
Пункт 1. Composable-функции – это про реактивность Vue
📌 Что делают?
- Работают с ref, reactive, computed, watch и другими реактивными штуками Vue.
- Позволяют повторно использовать логику, связанную с состоянием компонентов.
- Используют Composition API (setup()).
📌 Пример Composable для отслеживания размеров окна useWindowSize.js import { ref, onMounted, onUnmounted } from 'vue';
export function useWindowSize() { const width = ref(window.innerWidth); const height = ref(window.innerHeight);
function updateSize() { width.value = window.innerWidth; height.value = window.innerHeight; }
onMounted(() => window.addEventListener('resize', updateSize)); onUnmounted(() => window.removeEventListener('resize', updateSize));
return { width, height }; } ➡️ Главное отличие – тут используется ref, onMounted, onUnmounted, что делает код реактивным.
Пункт 2. Обычные модули JS – это про обычную логику
📌 Что делают?
- Содержат обычные функции и переменные.
- Не зависят от Vue и не работают с реактивностью.
- Используются в любом JS-проекте.
📌 Пример: модуль для работы с датами dateUtils.js export function formatDate(date) { return new Date(date).toLocaleDateString(); }
export function getCurrentYear() { return new Date().getFullYear(); } ➡️ Главное отличие – это просто набор чистых функций, не использующих Vue. Такой себе функциональный подход.
Пункт 3. Когда что использовать?
Нужно работать с реактивными данными ✅ Composable-функции ❌ JS-модули
Нужно управлять жизненным циклом (onMounted, onUnmounted) ✅ Composable-функции ❌ JS-модули
Нужно просто переиспользовать утилитарные функции ❌ Composable-функции ✅ JS-модули
Нужно слушать события (resize, input, click и т.д.) внутри Vue ✅ Composable-функции ❌ JS-модули
🎯 Вывод
- Composable-функции = реактивность, ref, computed, watch, Vue API.
- JS-модули = обычные функции, без реактивности, можно использовать в любом проекте.
Посему Если твой код завязан на Vue и реактивность – используй composable. Если нужна просто библиотека функций – делай обычный JS-модуль. 🚀
