Composition API

Vue Composition API คืออะไร

Vue Composition API เป็น API สำหรับการเขียนส่วนประกอบใน Vue ที่ทำให้การจัดการกับสถานะ (state) และ logic ของ component มีความยืดหยุ่น และสามารถนำกลับมาใช้ซ้ำได้ง่ายมากยิ่งขึ้น

ตัวอย่างการใช้งาน

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};
</script>

ในตัวอย่างนี้ เราใช้ ref เพื่อสร้างตัวแปร reactive และ setup สำหรับกำหนดว่า Vue ควรส่งคืนอะไรให้ template ซึ่งช่วยให้การจัดการและแยก logic ออกมาเป็นสัดส่วนได้ง่ายขึ้น.