Composition API

Vue Composition API เป็นฟีเจอร์ใหม่ที่นำมาใช้ใน Vue 3 เพื่อให้การจัดการกับ component และ logic ที่ซับซ้อนเป็นไปได้ง่ายขึ้น และช่วยให้โค้ดมีการจัดระเบียบที่ดีขึ้น ในส่วนนี้เราจะมาเรียนรู้พื้นฐานและวิธีใช้งาน Vue Composition API ผ่านตัวอย่างโค้ดเพื่อให้เข้าใจได้ง่ายขึ้น

1. การใช้งาน ref และ reactive

1.1  ref สำหรับตัวแปรพื้นฐาน

<script setup>
  import { ref } from 'vue';
  
  const count = ref(0);
  
  function increment() {
    count.value++;
  }
 </script>
  
 <template>
   <button @click="increment">คลิกเพิ่ม: {{ count }}</button>
 </template>

2. การใช้งานคำสั่ง  reactive

<script setup>
import { reactive } from 'vue';
  
const state = reactive({
  count: 0,
});
  
function increment(){
  state.count++;
}
</script>
  
<template>
  <button @click="increment">คลิกเพิ่ม: {{ state.count }}</button>
</template>

ตัวอย่าง 2: การใช้งาน computed และ watch

2.1 คำสั่ง  computed เพื่อสร้างค่าที่คำนวณจากตัวแปรอื่น

<script setup>
import { ref, computed } from 'vue';
  
const count = ref(0);
const doubled = computed(() => count.value * 2);
  
</script>
  
<template>
  <div>ค่าเดิม: {{ count }}</div>
  <div>ค่าที่คูณสอง: {{ doubled }}</div>
  <button @click="count++">เพิ่มค่า</button>
</template>

2.2 คำสั่ง  watch  สำหรับติดตามการเปลี่ยนแปลง

<script setup>
import { ref, watch } from 'vue';
  
const count = ref(0);
  
watch(count, (newValue, oldValue) => {
  console.log(`ค่าเปลี่ยนจาก ${oldValue} เป็น ${newValue}`);
});
  
</script>
  
<template>
  <button @click="count++">คลิกเพิ่ม: {{ count }}</button>
</template>

คำสั่ง setup สำหรับจัดการ logic ทั้งหมด

<script>
  import { ref, computed } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
      const doubled = computed(() => count.value * 2);
  
      function increment() {
        count.value++;
      }
  
      return {
        count,
        doubled,
        increment,
      };
    },
  };
</script>
  
<template>
  <div>ค่าเดิม: {{ count }}</div>
  <div>ค่าที่คูณสอง: {{ doubled }}</div>
  <button @click="increment">เพิ่มค่า</button>
</template>

อันนี้ก็คือตัวอย่างการใช้งาน Composition API ใน Vue 3 รวมไปถึงคำสั่งต่าง ๆ ที่เกี่ยวข้อง ไว้เดี๋ยวจะมาเขียนเพิ่มเติมและลงรายละเอียดที่ลึกมากขึ้นครับ

คอร์สเรียนแนะนำ