Composable là một hàm tái sử dụng đóng gói logic có state bằng Composition API. Theo quy ước nó được đặt tên useXxx và trả về state reactive cùng các hàm — cho phép bạn chia sẻ logic giữa các component mà không cần mixin hay lặp lại.
{ ref, computed } ;
() {
count = (initial);
double = ( count. * );
() { count.++; }
() { count. = initial; }
{ count, double, increment, reset };
}
<script setup>
import { useCounter } from "@/composables/useCounter";
const { count, double, increment } = useCounter(10); // mỗi lần gọi = state độc lập
</script>
<template>
<button @click="increment">{{ count }} (double: {{ double }})</button>
</template>
Mỗi component gọi useCounter() nhận count độc lập riêng của mình — composable tạo state mới mỗi lần gọi, khác với một biến dùng chung ở cấp module.
import { ref, onUnmounted } from "vue";
export function useMousePosition() {
const x = ref(0), y = ref(0);
const update = (e) => { x.value = e.pageX; y.value = e.pageY; };
window.addEventListener("mousemove", update); // thiết lập
onUnmounted(() => window.removeEventListener("mousemove", update)); // tự dọn dẹp!
return { x, y };
}
Composable có thể dùng lifecycle hook, watcher, và các composable khác — và quan trọng là chúng tự đóng gói việc dọn dẹp của mình (onUnmounted), nên người dùng không phải nhớ làm điều đó.
Mixin (Vue 2): trộn vào component — không rõ thuộc tính đến từ đâu,
xung đột tên giữa các mixin, dependency ngầm
Composable: import tường minh + giá trị trả về — nguồn rõ ràng, không xung đột,
có thể ghép nối, có kiểu đầy đủ trong TypeScript
Composable là cách idiomatic nhất để trích xuất và tái sử dụng logic có state trong Vue 3 — fetch dữ liệu, xử lý form, theo dõi chuột/scroll, debounce, v.v. Chúng giải quyết gọn gàng vấn đề tái sử dụng logic (tường minh, không xung đột, ghép nối được, thân thiện với TypeScript) nơi mixin của Vue 2 thất bại.
Chúng là lý do chính khiến các team áp dụng Composition API: logic dùng chung trở thành một hàm đơn giản, có thể test thay vì code rải rác hoặc trùng lặp.