Vue 3 Composition API เบื้องต้น

Vue 3 Composition API เป็นวิธีใหม่ในการเขียน Vue components ที่ให้ความยืดหยุ่นและการ reuse code ที่ดีขึ้น

setup() Function

setup() เป็น entry point หลักของ Composition API:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

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

export default {
  setup() {
    // Reactive state
    const count = ref(0)
    const title = ref('Vue 3 Counter')
    
    // Methods
    const increment = () => {
      count.value++
    }
    
    const decrement = () => {
      count.value--
    }
    
    // Computed
    const isPositive = computed(() => count.value > 0)
    
    // Return values to template
    return {
      title,
      count,
      increment,
      decrement,
      isPositive
    }
  }
}
</script>

Reactive References

ใช้ ref() สำหรับสร้าง reactive variables:

import { ref, reactive } from 'vue'

// Primitive values
const count = ref(0)
const message = ref('Hello Vue 3')

// Objects
const user = reactive({
  name: 'John',
  email: 'john@example.com',
  age: 30
})

// Access values
console.log(count.value) // 0
console.log(user.name) // 'John'

Composables

สร้าง reusable logic ด้วย composables:

// composables/useCounter.js
import { ref } from 'vue'

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

// ใช้งานใน component
import { useCounter } from './composables/useCounter'

export default {
  setup() {
    const { count, increment, decrement, reset } = useCounter(10)
    
    return {
      count,
      increment,
      decrement,
      reset
    }
  }
}

ข้อดีของ Composition API

• Better Logic Reuse - แชร์ logic ระหว่าง components ได้ง่าย
• Better Type Support - TypeScript support ดีขึ้น
• More Flexible - จัดกลุ่ม logic ตามฟีเจอร์แทนที่จะเป็น option types
• Tree-shaking Friendly - Import เฉพาะส่วนที่ใช้

สรุป

Composition API ให้ความยืดหยุ่นในการจัดการ component logic และช่วยให้ code reuse ได้ดีขึ้น โดยเฉพาะในโปรเจ็คขนาดใหญ่