หลักการตอบสนองเชิงลึก
เราได้พูดคุยเกี่ยวกับเนื้อหาพื้นฐานส่วนใหญ่แล้วและตอนนี้เราจะพูดคุยเกี่ยวกับเนื้อหาพื้นฐาน หนึ่งในคุณสมบัติที่สำคัญที่สุดของ Vue.js คือระบบตอบสนอง - โมเดลเป็นเพียงวัตถุปกติและการปรับเปลี่ยนจะอัปเดตมุมมอง สิ่งนี้ทำให้การจัดการของรัฐง่ายและใช้งานง่าย แต่การทำความเข้าใจหลักการของมันก็มีความสำคัญเช่นกันและสามารถหลีกเลี่ยงปัญหาที่พบได้ทั่วไป ต่อไปเราจะเริ่มขุดลึกลงไปในรายละเอียดพื้นฐานของระบบตอบสนอง Vue.js
วิธีติดตามการเปลี่ยนแปลง
ผ่านวัตถุปกติไปยังอินสแตนซ์ VUE เป็นตัวเลือกข้อมูล vue.js จะสำรวจคุณสมบัติของมันและแปลงเป็น getter/setter ด้วย Object.defineProperty นี่คือคุณสมบัติ ES5 และไม่สามารถนำไปใช้กับแพตช์ได้ นี่คือเหตุผลที่ vue.js ไม่รองรับ IE8 และต่ำกว่า
ผู้ใช้ไม่สามารถเห็น getters/setters แต่ภายในพวกเขาปล่อยให้ vue.js ติดตามการพึ่งพา, แจ้งการเปลี่ยนแปลงเมื่อคุณสมบัติมีการเข้าถึงและแก้ไข ปัญหาหนึ่งคือการจัดรูปแบบ getter/setter นั้นแตกต่างกันเมื่อการพิมพ์วัตถุข้อมูลบนคอนโซลเบราว์เซอร์และการใช้วิธีอินสแตนซ์ VM $ log () สามารถรับเอาต์พุตที่เป็นมิตรได้มากขึ้น
แต่ละคำสั่ง/ข้อมูลที่มีผลผูกพันในเทมเพลตมีวัตถุ Watcher ที่สอดคล้องกันซึ่งบันทึกแอตทริบิวต์เป็นการพึ่งพาระหว่างกระบวนการคำนวณ หลังจากนั้นเมื่อมีการเรียกผู้ตั้งค่าที่ขึ้นอยู่กับการคำนวณใหม่ของ Watcher จะถูกเรียกใช้ซึ่งจะทำให้คำแนะนำที่เกี่ยวข้องเพื่ออัปเดต DOM
เปลี่ยนปัญหาการตรวจจับ
เนื่องจากข้อ จำกัด ES5 Vue.js ไม่สามารถตรวจจับการเพิ่มหรือการกำจัดคุณสมบัติของวัตถุ เนื่องจาก vue.js แปลงคุณสมบัติเป็น getter/setter เมื่อเริ่มต้นอินสแตนซ์คุณสมบัติจะต้องอยู่ในวัตถุข้อมูลเพื่อให้ vue.js สามารถแปลงเพื่อให้ตอบสนองได้ ตัวอย่างเช่น:
var data = {a: 1} var vm = new vue ({data: data}) // `vm.a` และ` data.a` ตอนนี้ตอบสนอง vm.b = 2 // `vm.b` ไม่ตอบสนอง data.b = 2 //` data.b` ไม่ตอบสนองอย่างไรก็ตามมีวิธีเพิ่มแอตทริบิวต์หลังจากการสร้างอินสแตนซ์และทำให้ตอบสนอง
สำหรับอินสแตนซ์ VUE คุณสามารถใช้วิธีการอินสแตนซ์ $ set (คีย์, ค่า):
vm. $ set ('b', 2) // `vm.b` และ` data.b` ตอนนี้ตอบสนองสำหรับวัตถุข้อมูลปกติวิธีการทั่วโลก vue.set (วัตถุ, คีย์, ค่า):
vue.set (data, 'c', 3) // `vm.c` และ` data.c` ตอนนี้ตอบสนอง
บางครั้งคุณต้องการเพิ่มคุณสมบัติบางอย่างให้กับวัตถุที่มีอยู่เช่นการใช้ Object.assign () หรือ _.extend () เพื่อเพิ่มคุณสมบัติ อย่างไรก็ตามคุณสมบัติใหม่ที่เพิ่มเข้ามาในวัตถุจะไม่เปิดการอัปเดต ในเวลานี้คุณสามารถสร้างวัตถุใหม่รวมถึงคุณสมบัติของวัตถุต้นฉบับและคุณสมบัติใหม่:
// อย่าใช้ `object.assign (this.someObject, {a: 1, b: 2})` this.someobject = object.assign ({}, this.someobject, {a: 1, b: 2})นอกจากนี้ยังมีปัญหาที่เกี่ยวข้องกับอาร์เรย์ที่ได้กล่าวถึงในรายการการแสดงผลก่อน
เริ่มต้นข้อมูล
แม้ว่า Vue.js จะให้ API เพื่อเพิ่มแอตทริบิวต์การตอบสนองแบบไดนามิก แต่ก็ขอแนะนำให้ประกาศแอตทริบิวต์การตอบสนองทั้งหมดบนวัตถุข้อมูล
อย่าทำเช่นนี้:
var vm = new vue ({template: '<div> {{msg}} </div>'}) // จากนั้นเพิ่ม `msg`vm. $ set ('msg', 'hello!')ทำสิ่งนี้:
var vm = new vue ({data: {// declare `msg` msg: ''}, เทมเพลต: '<div> {{msg}} </div>'}) // จากนั้นตั้งค่า` msg`vmmmsg = 'hello!'มีสองเหตุผลในการทำสิ่งนี้:
1. วัตถุข้อมูลเป็นเหมือนสคีมาของสถานะส่วนประกอบ การประกาศคุณสมบัติทั้งหมดบนมันทำให้รหัสส่วนประกอบเข้าใจง่ายขึ้น
2. การเพิ่มคุณสมบัติการตอบสนองระดับบนสุดบังคับให้ผู้เฝ้าดูทุกคนคำนวณใหม่เพราะมันไม่เคยมีมาก่อนและไม่มีผู้เฝ้าดูติดตาม ประสิทธิภาพนี้มักจะยอมรับได้ (โดยเฉพาะเมื่อเทียบกับการตรวจสอบสกปรกของ Angular) แต่สามารถหลีกเลี่ยงได้ในการเริ่มต้น
คิวการอัปเดตแบบอะซิงโครนัส
vue.js เริ่มต้นเป็นแบบอะซิงโครนัสอัพเดต DOM เมื่อใดก็ตามที่สังเกตการเปลี่ยนแปลงข้อมูล Vue จะเริ่มคิวเพื่อแคชการเปลี่ยนแปลงข้อมูลทั้งหมดในลูปเหตุการณ์เดียวกัน หากผู้เฝ้าดูถูกยิงหลายครั้งมันจะถูกผลักเข้าไปในคิวเพียงครั้งเดียว รอจนกว่าลูปเหตุการณ์ถัดไป Vue จะล้างคิวและทำการอัปเดต DOM ที่จำเป็นเท่านั้น Mutationobserver เป็นที่ต้องการในคิวแบบอะซิงโครนัสภายในและใช้งาน (FN, 0) หากไม่รองรับ
ตัวอย่างเช่นด้วยชุด vm.somedata = 'ค่าใหม่' DOM จะไม่อัปเดตทันที แต่จะอัปเดตในครั้งต่อไปที่ลูปเหตุการณ์จะล้างคิว โดยพื้นฐานแล้วเราไม่จำเป็นต้องใส่ใจเกี่ยวกับกระบวนการนี้ แต่จะช่วยได้หากคุณต้องการทำอะไรบางอย่างหลังจากอัปเดตสถานะ DOM แม้ว่า vue.js สนับสนุนให้นักพัฒนาปฏิบัติตามวิธีการที่ขับเคลื่อนด้วยข้อมูลและหลีกเลี่ยงการปรับเปลี่ยน DOM โดยตรง แต่บางครั้งก็ทำ ในการรอ Vue.js เพื่อทำการอัปเดต DOM ให้เสร็จสิ้นหลังจากการเปลี่ยนแปลงข้อมูลคุณสามารถใช้ vue.nexttick (โทรกลับ) ทันทีหลังจากการเปลี่ยนแปลงข้อมูล การโทรกลับถูกเรียกหลังจากการอัปเดต DOM เสร็จสมบูรณ์ ตัวอย่างเช่น:
<div id = "ตัวอย่าง"> {{msg}} </div>
var vm = new vue ({el: '#example', ข้อมูล: {msg: '123'}}) vm.msg = 'ข้อความใหม่' // แก้ไขข้อมูล vm. $ el.textContent === 'ข้อความใหม่' // falseVue.nexttick (ฟังก์ชัน () {vm.วิธีการอินสแตนซ์นี้สะดวกกว่าเนื่องจากไม่จำเป็นต้องใช้ Global Vue และการโทรกลับนี้จะถูกผูกไว้กับอินสแตนซ์ VUE ปัจจุบันโดยอัตโนมัติ:
Vue.Component ('ตัวอย่าง', {เทมเพลต: '<span> {{msg}} </span>', data: function () {return {msg: 'ไม่อัปเดต'}}, วิธี: {updateMessage: function () {this.msg = 'updated' () {console.log (นี่. $ el.textContent) // => 'update'})}}})ความลับของคุณลักษณะการคำนวณ
คุณควรทราบว่าคุณสมบัติที่คำนวณได้ของ Vue.js ไม่ใช่ผู้ได้รับความง่าย คุณสมบัติการคำนวณติดตามการตอบสนองการตอบสนองอย่างต่อเนื่อง เมื่อคำนวณคุณสมบัติที่คำนวณได้ Vue.js จะอัปเดตรายการการพึ่งพาและแคชผลลัพธ์ ผลลัพธ์ที่แคชนั้นไม่ถูกต้องก็ต่อเมื่อการพึ่งพาการเปลี่ยนแปลงอย่างใดอย่างหนึ่ง ดังนั้นตราบใดที่การพึ่งพาไม่เปลี่ยนแปลงการเข้าถึงคุณสมบัติที่คำนวณจะส่งคืนผลลัพธ์ที่แคชโดยตรงแทนการเรียก getter
ทำไมต้องแคช? สมมติว่าเรามีคุณสมบัติการคำนวณที่ใช้เวลาสูงซึ่งจะทำซ้ำผ่านอาร์เรย์ยักษ์และทำการคำนวณจำนวนมาก จากนั้นอาจมีคุณสมบัติที่คำนวณได้อื่น ๆ ที่ขึ้นอยู่กับ A. หากไม่มีแคชเราจะเรียก Getter ของ A หลายครั้งมากกว่าที่จำเป็น
เนื่องจากคุณสมบัติที่คำนวณได้ถูกแคช Getter จึงไม่ได้ถูกเรียกเมื่อเข้าถึงได้เสมอไป พิจารณาตัวอย่างต่อไปนี้:
var vm = new vue ({data: {msg: 'hi'}, คำนวณ: {ตัวอย่าง: function () {return date.now () + this.msg}}})ตัวอย่างคุณสมบัติที่คำนวณได้มีเพียงการพึ่งพาเพียงครั้งเดียว: vm.msg Date.now () ไม่ใช่การพึ่งพาการตอบสนองเพราะไม่มีส่วนเกี่ยวข้องกับระบบการสังเกตข้อมูลของ Vue ดังนั้นเมื่อเข้าถึง VM.Example การประทับเวลาจะยังคงไม่เปลี่ยนแปลงเว้นแต่ VMMMSG จะเปลี่ยนแปลง
บางครั้งฉันหวังว่า Getter จะไม่เปลี่ยนพฤติกรรมดั้งเดิมและโทรหา Getter ทุกครั้งที่ฉันเข้าถึง VM.Example ในเวลานี้แคชสามารถปิดได้สำหรับแอตทริบิวต์คำนวณที่ระบุ:
คำนวณ: {ตัวอย่าง: {cache: false, get: function () {return date.now () + this.msg}}}}}ตอนนี้ทุกครั้งที่คุณเข้าถึง VM.Example การประทับเวลาเป็นของใหม่ อย่างไรก็ตามการเข้าถึง JavaScript เป็นแบบนี้ การเชื่อมโยงข้อมูลยังคงขับเคลื่อนโดยการพึ่งพา หากแอตทริบิวต์ที่คำนวณได้ {{ตัวอย่าง}} ถูกผูกไว้ในโมดูล DOM จะได้รับการอัปเดตเฉพาะเมื่อการเปลี่ยนแปลงการตอบสนองการตอบสนอง
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
สำหรับการสอนเกี่ยวกับส่วนประกอบ vue.js โปรดคลิกที่หัวข้อพิเศษ vue.js การสอนการเรียนรู้องค์ประกอบเพื่อเรียนรู้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น