เริ่มต้น Vue 3 Composition API: จัดการ Logic แบบใหม่ให้โค้ดสะอาดขึ้น

Vue 3 นำเสนอ Composition API เป็นทางเลือกใหม่ในการจัดการ Logic ใน Component ทำให้โค้ดอ่านง่ายและเป็นระเบียบมากขึ้น

setup() Function

setup() เป็นจุดเริ่มต้นของ Composition API:

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

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

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

    onMounted(() => {
      console.log('Component mounted');
    });

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

ref และ reactive

• ref: สำหรับ primitive values (string, number, boolean)
• reactive: สำหรับ objects และ arrays

<script setup>
import { ref, reactive } from 'vue';

const message = ref('Hello Vue!');
const user = reactive({
  name: 'John Doe',
  age: 30
});
</script>

สรุป

Composition API ช่วยให้เราจัดกลุ่ม Logic ตามฟีเจอร์ ทำให้โค้ดสะอาดและดูแลรักษาง่ายในระยะยาว