Vue.js 3 Composition API: Hướng dẫn từ A đến Z

Giới thiệu Composition API

Composition API cho phép bạn tổ chức code theo logic thay vì theo options, giúp code dễ đọc và tái sử dụng hơn.

Setup cơ bản

<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('Component mounted')
})
</script>

Reusability với Composables

Composables cho phép bạn tái sử dụng logic:

// composables/useCounter.js
export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  const decrement = () => count.value--
  return { count, increment, decrement }
}

Kết luận

Composition API là tương lai của Vue.js, giúp code dễ maintain và scale hơn.