คุณสมบัติแบบคำนวณ
สร้างค่ารับรู้การเปลี่ยนแปลงที่แคชไว้ด้วยคุณสมบัติแบบคำนวณ
คุณสมบัติแบบคำนวณ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
พร็อพเพอร์ตีคำนวณคืออะไร
พร็อพเพอร์ตีคำนวณ ใช้สร้างค่าจากข้อมูลอื่นที่มีการตอบสนอง
- จะคำนวณใหม่เฉพาะเมื่อการพึ่งพาเปลี่ยนแปลง
- ในเทมเพลตจะอ่านได้เหมือนพร็อพเพอร์ตีทั่วไป
- ช่วยให้เทมเพลตสะอาดขึ้นโดยย้ายตรรกะไปไว้ใน JS
การกำหนด computed
ใน Composition API ให้ใช้ฟังก์ชัน computed
import { ref, computed } from "vue"
const firstName = ref("Ada")
const lastName = ref("Lovelace")
const fullName = computed(() => {
return firstName.value + " " + lastName.value
})การใช้ computed ในเทมเพลต
เข้าถึง computed ได้เหมือนพร็อพเพอร์ตีของข้อมูล โดยไม่ต้องใส่วงเล็บ
<template>
<p>{{ fullName }}</p>
</template>
<!-- fullName updates automatically when
firstName or lastName change -->computed กับเมธอด
เมธอดก็ส่งคืนค่าได้เช่นกัน แล้วทำไมจึงควรใช้ computed
- computed จะถูกแคชตามการพึ่งพา
- เมธอดจะทำงานทุกครั้งที่ถูกเรียกในการเรนเดอร์
computed มีประสิทธิภาพมากกว่าสำหรับค่าที่คำนวณจากข้อมูลอื่นและถูกใช้ซ้ำ
การแคชในการทำงานจริง
computed จะทำงานอีกครั้งเฉพาะเมื่อการพึ่งพาเปลี่ยนแปลง หากคุณอ่านค่าหลายครั้ง ระบบจะนำผลลัพธ์ที่แคชไว้มาดูซ้ำ
const expensive = computed(() => {
console.log("computing...")
return heavyCalculation(data.value)
})
// Reading expensive twice in one render
// logs "computing..." only onceเมธอดทำงานทุกครั้ง
ในทางกลับกัน เมธอดจะคำนวณใหม่ทุกครั้งที่ถูกเรียก แม้ค่าอินพุตจะไม่เปลี่ยนแปลง
// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times
methods: {
getTotal() {
return this.price * this.qty
}
}computed ใน Options API
Options API ประกาศพร็อพเพอร์ตีคำนวณไว้ในบล็อก computed
export default {
data() {
return { price: 10, qty: 3 }
},
computed: {
total() {
return this.price * this.qty
}
}
}ตัวอ่านค่าของ computed
โดยค่าเริ่มต้น computed จะเป็นแบบอ่านอย่างเดียว เพราะมีเฉพาะตัวอ่านค่า
ตัวอ่านค่าจะทำงานเพื่อสร้างค่าเมื่อการพึ่งพาเปลี่ยนแปลง
const doubled = computed(() => count.value * 2)
// You can read doubled.value
// but assigning to it would warnตัวกำหนดค่าของ computed
คุณสามารถทำให้ computed เขียนค่าได้โดยกำหนดทั้งฟังก์ชัน get และ set
const fullName = computed({
get() {
return first.value + " " + last.value
},
set(newValue) {
const parts = newValue.split(" ")
first.value = parts[0]
last.value = parts[1]
}
})การใช้ตัวกำหนดค่า
เมื่อคุณกำหนดค่าให้ computed ที่เขียนค่าได้ ตัวกำหนดค่าของมันจะทำงาน
fullName.value = "Grace Hopper"
// The setter splits and assigns:
// first.value -> "Grace"
// last.value -> "Hopper"ควรใช้ computed เมื่อใด
เลือกใช้ computed เมื่อคุณต้องการค่าที่คำนวณต่อยอดจากสถานะที่มีการตอบสนอง
- กรองหรือเรียงลำดับรายการ
- จัดรูปแบบข้อมูลเพื่อแสดงผล
- รวมค่าหลายค่าเป็นค่าเดียว
ใช้ตัวเฝ้าดู (ในบทเรียนถัดไป) เมื่อคุณต้องการตอบสนองด้วยผลข้างเคียงแทน
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจของคุณเกี่ยวกับพร็อพเพอร์ตีคำนวณ
ทบทวน: พร็อพเพอร์ตีคำนวณ
คุณได้เรียนรู้เกี่ยวกับสถานะที่คำนวณต่อยอด
- computed ใช้สร้างค่าจากข้อมูลที่มีการตอบสนอง
- ค่าจะถูกแคชและคำนวณใหม่เฉพาะเมื่อการพึ่งพาเปลี่ยนแปลง
- เมธอดทำงานทุกครั้งที่ถูกเรียก แต่ computed ไม่ทำเช่นนั้น
- computed สามารถมีตัวอ่านค่าและตัวกำหนดค่าเพิ่มเติมได้
ถัดไป: ตัวเฝ้าดูและการทำงานแบบรีแอกทีฟเชิงลึก
คำถามที่พบบ่อย
บทเรียน “คุณสมบัติแบบคำนวณ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คุณสมบัติแบบคำนวณ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “คุณสมบัติแบบคำนวณ”
สร้างค่ารับรู้การเปลี่ยนแปลงที่แคชไว้ด้วยคุณสมบัติแบบคำนวณ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “คุณสมบัติแบบคำนวณ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐานรีแอกทีฟ
- คุณสมบัติแบบคำนวณ
- Watcher และรีแอกทีฟเชิงลึก