Nội dung chính
🚀 Khám Phá Sâu Về Vue.js Composition API
Composition API Là Gì?
💡
Composition API là cách viết component Vue.js mới giúp tái sử dụng logic tốt hơn và tổ chức code khoa học hơn, đặc biệt với các component phức tạp.
🎯 Điểm mấu chốt: Thay vì tổ chức code theo options (data, methods, computed…), Composition API cho phép nhóm code theo chức năng.
🔥 Lợi Ích Nổi Bật
1. Tái Sử Dụng Logic Linh Hoạt Hơn
Với Composition API, bạn có thể dễ dàng trích xuất và tái sử dụng logic giữa các component:
// useCounter.js
import { ref, computed } from 'vue'
export function useCounter(initialValue = 0) {
const count = ref(initialValue)
const doubled = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubled, increment }
}
💡 Ví dụ thực tế: Bạn có thể tạo các composable như useFormValidation
, useApiCall
và dùng lại ở nhiều nơi.
2. Hỗ Trợ TypeScript Tốt Hơn
Composition API hoạt động trơn tru với TypeScript:
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const message = ref<string>('Hello Vue 3!')
const count = ref<number>(0)
return { message, count }
}
})
💡 Lưu ý: Kiểu dữ liệu được xác định rõ ràng giúp phát hiện lỗi sớm khi code.
⚙️ Các Khái Niệm Cốt Lõi
Reactive References
ref()
:
Tạo reactive reference cho giá trị nguyên thủy (number, string…)reactive()
:
Tạo reactive proxy cho objectcomputed()
:
Tạo computed properties
Lifecycle Hooks
import { onMounted, onUpdated, onUnmounted } from 'vue'
export default {
setup() {
onMounted(() => {
console.log('Component mounted!')
})
onUpdated(() => {
console.log('Component updated!')
})
onUnmounted(() => {
console.log('Component unmounted!')
})
}
}
⚠️ Chú ý: Các hook lifecycle trong Composition API có tiền tố on
(vd:
onMounted
thay vì mounted
)
📝 Mẹo Chuyển Đổi
- Bắt Đầu Từ Nhỏ:
Thử nghiệm với component mới trước - Kết Hợp Cả Hai:
Có thể dùng song song Composition API và Options API - Composables:
Tách logic có thể tái sử dụng thành các hàm composable - Tận Dụng TypeScript:
Sử dụng TypeScript để tăng độ ổn định code
💡 Ví dụ thực tế tại Việt Nam:
– Các dự án lớn như Tiki, Shopee đang chuyển dần sang Composition API
– Có thể áp dụng từng phần cho các dự án hiện có mà không cần viết lại toàn bộ
🎯 Tóm tắt nhanh:
– Composition API = Tổ chức code theo chức năng thay vì options
– Dễ tái sử dụng logic với composable functions
– Hỗ trợ TypeScript tốt hơn
– Có thể áp dụng từ từ, không cần thay đổi toàn bộ dự án ngay lập tức
🎯 Kết luận:
Tại sao Composition API là “game-changer” trong Vue.js?
Composition API không chỉ là một tính năng mới
– nó là cách tiếp cận đột phá giúp bạn viết code Vue.js chuyên nghiệp hơn, đặc biệt khi làm việc với:
- Ứng dụng phức tạp (quản lý state nhiều tầng)
- Dự án dùng TypeScript
- Team có nhiều dev cùng maintain codebase
💎 Lợi ích nổi bật:
✅ Tổ chức code khoa học:
Nhóm logic liên quan với nhau thay vì phân tán theo options (data, methods…)
✅ Tái sử dụng cực tốt:
Dễ dàng extract logic thành composable functions (ví dụ:
useUserAuth()
, useCart()
)
✅ TypeScript hỗ trợ mạnh:
Type inference hoạt động tốt hơn hẳn Options API
✅ Bảo trì dễ dàng:
Khi requirement thay đổi, bạn chỉ cần sửa 1 chỗ thay vì phải nhảy qua lại giữa các options
💡 Ví dụ thực tế tại Việt Nam:
– Các startup như Tiki, Shopee Vietnam đang áp dụng Composition API cho các tính năng mới
– Giúp team phân module rõ ràng khi phát triển tính năng phức tạp như thanh toán đa nền tảng
🔧 Khi nào nên dùng?
- Ưu tiên Composition API nếu:
- Dự án mới từ đầu
- Cần tối ưu TypeScript
-
Logic nghiệp vụ phức tạp
-
Có thể kết hợp với Options API nếu:
- Bảo trì dự án cũ
- Component đơn giản, ít logic
🚀 Pro tip:
Bắt đầu với Composition API từ các component nhỏ, sau đó áp dụng dần cho cả project để cảm nhận sự khác biệt!
// Ví dụ: So sánh cách viết cơ bản
// Options API
export default {
data() {
return { count: 0 }
},
methods: {
increment() { this.count++ }
}
}
// Composition API
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}
}
⚠️ Lưu ý quan trọng:
Composition API không thay thế Options API, nó chỉ cung cấp thêm lựa chọn phù hợp hơn cho các use-case cụ thể!
Bạn đã sẵn sàng nâng tầm Vue.js project với Composition API chưa?
Hãy thử ngay với Vue 3 Playground và chia sẻ trải nghiệm của bạn nhé!
💻✨