Options API: data, methods และ computed
กำหนดข้อมูลแบบตอบสนอง เขียนเมธอดที่เรียกจาก template และใช้คุณสมบัติ computed สำหรับค่าที่คำนวณจากข้อมูลอื่นและอัปเดตโดยอัตโนมัติ
Options API: data, methods และ computed เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
Options API คืออะไร
Options API จัดระเบียบตรรกะของคอมโพเนนต์ตามประเภทของอ็อปชัน ได้แก่ data (สถานะรีแอกทีฟ), methods (ฟังก์ชัน), computed (สถานะที่คำนวณจากข้อมูลอื่น), watch (ผลข้างเคียง) และฮุกวงจรชีวิต แต่ละส่วนจะอยู่ในพร็อพเพอร์ตี้อ็อบเจ็กต์ที่มีชื่อกำกับ
อ็อปชัน data
ส่งคืนอ็อบเจ็กต์ที่มีพร็อพเพอร์ตี้แบบรีแอกทีฟ พร็อพเพอร์ตี้ทั้งหมดที่ประกาศใน data() จะเป็นรีแอกทีฟ — Vue จะเฝ้าสังเกตพร็อพเพอร์ตี้เหล่านี้และเรนเดอร์ template ใหม่เมื่อค่าเปลี่ยนแปลง
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}อ็อปชัน methods
ฟังก์ชันที่เรียกใช้ได้จาก template หรือ methods อื่น ๆ ภายใน methods, this จะอ้างถึงอินสแตนซ์ของคอมโพเนนต์ และทำให้เข้าถึง data และ computed ได้
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}อ็อปชัน computed
พร็อพเพอร์ตี้ computed ใช้คำนวณค่าจากข้อมูลรีแอกทีฟ โดยมีการแคชค่าไว้ — จะคำนวณใหม่เฉพาะเมื่อสิ่งที่พึ่งพาเปลี่ยนแปลง ใช้แทน methods สำหรับค่าที่คำนวณจากข้อมูลอื่น เพื่อหลีกเลี่ยงการคำนวณซ้ำโดยไม่จำเป็น
export default {
data() {
return { items: [], tax: 0.2 };
},
computed: {
itemCount() { return this.items.length; },
subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
total() { return this.subtotal * (1 + this.tax); } // uses another computed
}
}พร็อพเพอร์ตี้ computed ที่เขียนค่าได้
computed สามารถมี get และ set เพื่อทำให้เขียนค่าได้ ซึ่งมีประโยชน์สำหรับการผูกข้อมูลแบบสองทางด้วย v-model
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}อ็อปชัน watch
Watcher จะทำงานเพื่อสร้างผลข้างเคียงเมื่อพร็อพเพอร์ตี้รีแอกทีฟเปลี่ยนแปลง ใช้สำหรับการทำงานแบบไม่พร้อมกันที่เริ่มจากการเปลี่ยนแปลงของข้อมูล เช่น การดึงข้อมูลเมื่อ search term เปลี่ยนแปลง
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}ฮุกวงจรชีวิตใน Options API
ประกาศฮุกวงจรชีวิตเป็น methods ได้แก่ created, mounted, updated และ unmounted โดย created จะทำงานก่อนที่ DOM จะพร้อมใช้งาน ส่วน mounted จะทำงานหลังจากคอมโพเนนต์เข้าสู่ DOM แล้ว
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}การเข้าถึง Template: $refs
เพิ่มแอตทริบิวต์ ref ให้กับองค์ประกอบใน template แล้วเข้าถึงองค์ประกอบ DOM หรือคอมโพเนนต์ลูกผ่าน this.$refs.name ใน methods ได้ โดยจะพร้อมใช้งานหลังการเมานต์
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixins เทียบกับ Composition API
Options API มี mixins สำหรับแบ่งปันตรรกะระหว่างคอมโพเนนต์ โดยทั่วไป mixins ถูกแทนที่ด้วย composables ใน Composition API แล้ว — เนื่องจากทำความเข้าใจได้ยากกว่าและอาจเกิดปัญหาชื่อในเนมสเปซชนกัน สำหรับโค้ดใหม่ควรเลือกใช้ Composition API
Options API เทียบกับ Composition API
Options API เหมาะสำหรับคอมโพเนนต์ขนาดเล็กถึงขนาดกลาง และเรียนรู้ได้ง่ายกว่าสำหรับผู้เริ่มต้น ส่วน Composition API (setup() /