Composition API

   อัปเดตล่าสุด Feb. 17, 2024

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 รวมไปถึงคำสั่งต่าง ๆ ที่เกี่ยวข้อง ไว้เดี๋ยวจะมาเขียนเพิ่มเติมและลงรายละเอียดที่ลึกมากขึ้นครับ



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