🚀 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 object
• computed():
  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

1. Bắt Đầu Từ Nhỏ:
   Thử nghiệm với component mới trước
2. Kết Hợp Cả Hai:
   Có thể dùng song song Composition API và Options API
3. Composables:
   Tách logic có thể tái sử dụng thành các hàm composable
4. 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é!
💻✨