อัปเดตล่าสุด Feb. 17, 2024
Vue Composition API เป็นฟีเจอร์ใหม่ที่นำมาใช้ใน Vue 3 เพื่อให้การจัดการกับ component และ logic ที่ซับซ้อนเป็นไปได้ง่ายขึ้น และช่วยให้โค้ดมีการจัดระเบียบที่ดีขึ้น ในส่วนนี้เราจะมาเรียนรู้พื้นฐานและวิธีใช้งาน Vue Composition API ผ่านตัวอย่างโค้ดเพื่อให้เข้าใจได้ง่ายขึ้น
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.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>
<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 รวมไปถึงคำสั่งต่าง ๆ ที่เกี่ยวข้อง ไว้เดี๋ยวจะมาเขียนเพิ่มเติมและลงรายละเอียดที่ลึกมากขึ้นครับ