ค่าและวิธีการคำนวณแตกต่างกันมากใน Vue และไม่สามารถใช้แทนกันได้ในกรณีส่วนใหญ่
คำนวณทรัพย์สิน
ชื่อที่เหมาะสมกว่าสำหรับค่าที่คำนวณได้เป็นคุณสมบัติที่คำนวณได้ ในความเป็นจริงเมื่อ Vue ถูกสร้างอินสแตนซ์คุณสมบัติที่คำนวณได้จะถูกแปลงเป็นคุณสมบัติของ Vue ด้วย getter และบางครั้งเป็น setter โดยทั่วไปคุณสามารถนึกถึงค่าที่คำนวณเป็นค่าที่ได้รับซึ่งจะได้รับการอัปเดตโดยอัตโนมัติเมื่อใดก็ตามที่หนึ่งในค่าพื้นฐานที่ใช้ในการคำนวณนั้นจะได้รับการอัปเดต คุณไม่เรียกใช้การคำนวณและไม่ยอมรับพารามิเตอร์ใด ๆ คุณอ้างอิงคุณสมบัติที่คำนวณเช่นเดียวกับคุณสมบัติของข้อมูล นี่คือตัวอย่างคลาสสิกจากเอกสาร :
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
ซึ่งมีการอ้างอิงใน DOM เช่นนี้:
<p>Computed reversed message: "{{ reversedMessage }}"</p>
ค่าที่คำนวณได้มีค่ามากสำหรับการจัดการข้อมูลที่มีอยู่ใน Vue ของคุณ เมื่อใดก็ตามที่คุณต้องการกรองหรือแปลงข้อมูลของคุณโดยทั่วไปคุณจะใช้ค่าที่คำนวณได้สำหรับวัตถุประสงค์นั้น
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.names.filter(n => n.startsWith("B"))
}
}
<p v-for="name in startsWithB">{{name}}</p>
ค่าที่คำนวณจะถูกเก็บไว้ในแคชเพื่อหลีกเลี่ยงการคำนวณซ้ำซึ่งไม่จำเป็นต้องคำนวณซ้ำเมื่อไม่มีการเปลี่ยนแปลง (เช่นอาจไม่อยู่ในวงวน)
วิธี
วิธีการเป็นเพียงฟังก์ชั่นที่ถูกผูกไว้กับอินสแตนซ์ Vue มันจะถูกประเมินเมื่อคุณเรียกอย่างชัดเจนเท่านั้น เช่นเดียวกับฟังก์ชั่นจาวาสคริปต์ทั้งหมดที่รับพารามิเตอร์และจะได้รับการประเมินใหม่ทุกครั้งที่มีการเรียกใช้ วิธีการมีประโยชน์ในสถานการณ์เดียวกันฟังก์ชั่นใด ๆ ที่มีประโยชน์
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.startsWithChar("B")
},
startsWithM(){
return this.startsWithChar("M")
}
},
methods:{
startsWithChar(whichChar){
return this.names.filter(n => n.startsWith(whichCharacter))
}
}
เอกสารของ Vue นั้นดีและสามารถเข้าถึงได้ง่าย ฉันแนะนำมัน
