คำนำ
แอตทริบิวต์ที่คำนวณใช้เพื่ออธิบายการแสดงออกที่ประกาศว่าค่าขึ้นอยู่กับค่าอื่น ๆ เมื่อคุณผูกข้อมูลกับคุณสมบัติที่คำนวณไว้ในเทมเพลต Vue จะอัปเดต DOM เมื่อค่าใด ๆ ขึ้นอยู่กับสาเหตุของคุณสมบัติที่คำนวณเพื่อเปลี่ยน คุณลักษณะนี้มีประสิทธิภาพมากสามารถทำให้รหัสของคุณมีการประกาศมากขึ้นไดรฟ์ข้อมูลและง่ายต่อการบำรุงรักษา
การแสดงออกในเทมเพลตนั้นสะดวกมาก แต่จริง ๆ แล้วใช้สำหรับการดำเนินงานที่เรียบง่ายเท่านั้น
เทมเพลตคือการอธิบายโครงสร้างของมุมมอง การใส่ตรรกะมากเกินไปลงในเทมเพลตจะทำให้เทมเพลตหนักเกินไปและยากที่จะรักษา
นี่คือเหตุผลที่ vue.js จำกัด นิพจน์ที่มีผลผูกพันกับการแสดงออกเดียว
หากจำเป็นต้องมีการแสดงออกมากกว่าหนึ่งรายการควรใช้คุณสมบัติที่คำนวณได้
มาดูตัวอย่างง่ายๆนี้
<div id = "ตัวอย่าง"> a = {{a}}, b = {{b}} </div> var vm = new vue ({// เหตุผลสำหรับการตั้งชื่อ vm คือนี่คือ VM ใน mvvm el: '#example' ข้อมูล: {a: 1} return this.a + 1}}})ผลลัพธ์ผลลัพธ์:
a = 1, b = 2
ที่นี่เราประกาศคุณสมบัติที่คำนวณได้ ฟังก์ชั่นที่เราให้ไว้จะถูกใช้เป็น getter สำหรับคุณสมบัติ vm.b.
console.log (vm.b) // -> 2vm.a = 3console.log (vm.b) // -> 3
คุณสามารถผูกคุณสมบัติที่คำนวณได้ในเทมเพลตเช่นคุณจะผูกคุณสมบัติปกติ Vue รู้ว่า VM.B ขึ้นอยู่กับ VM.A ดังนั้นเมื่อ VM.A เปลี่ยนแปลงการผูกที่ขึ้นอยู่กับ VM.B จะได้รับการปรับปรุง และสิ่งที่ดีที่สุดคือเราสร้างการพึ่งพาอาศัยกันอย่างชัดเจน: การรับคุณสมบัติของการคำนวณนั้นสะอาดและไม่มีผลข้างเคียงดังนั้นพวกเขาจึงทดสอบและเข้าใจได้ง่าย
หากคุณต้องการสังเกตการเปลี่ยนแปลงข้อมูลในอินสแตนซ์ VUE คุณสามารถใช้วิธีการที่ Vue.js $watch
<div id = "demo"> {{fullName}} </div> var vm = new vue ({data: {firstName: 'foo', นามสกุล: 'bar', fullName: 'foo bar'}}) vm. $ watch ('firstName' this.lastName}) vm. $ watch ('LastName', function (val) {this.fullName = this.firstName + '' + val}) อย่างไรก็ตามวิธีการข้างต้นยังสามารถนำไปใช้โดยใช้ computed :
var vm = new vue ({data: {firstName: 'foo', LastName: 'bar'}, คำนวณ: {fullName: function () {return this.firstName + '' this.lastName}}}) เขียนด้วยวิธีนี้ง่ายกว่าหรือไม่? ไม่มีรหัสซ้ำที่ไม่จำเป็น? เจ้าหน้าที่ยังส่งเสริมให้ใช้วิธี computed
เมื่อฉันพูดคุยเกี่ยวกับ computed ข้างต้นมันถูกกล่าวว่าวิธีนี้ให้วิธี get เริ่มต้น มีวิธี set หรือไม่?
// ... คำนวณ: {fullName: {// getter get: function () {return this.firstname + '' + this.lastname}, // setter set: function (newValue) {var names = newValue.split ('') this.firstname = ชื่อ [0] ชื่อนี้ ถ้าเราเรียก vm.fullName = 'John Doe' setter จะถูกเรียก vm.firstName และ vm.lastName จะมีการอัปเดตที่สอดคล้องกัน วิธีนี้มีประโยชน์ในบางครั้ง
สรุป
ข้างต้นเป็นเรื่องเกี่ยวกับคุณลักษณะการคำนวณ Vue.js ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับทุกคน ตัวแก้ไขจะอัปเดตเนื้อหาเกี่ยวกับ vue.js ต่อไป เพื่อนที่สนใจสามารถติดตาม Wulin.com ต่อไปได้