ตัวสร้างและวงจรชีวิตที่ต้องเรียนรู้ทุกวัน

ตัวสร้าง

แอปพลิเคชัน Vue.js แต่ละตัวเริ่มต้นด้วยการสร้างอินสแตนซ์รูทของ Vue ผ่านตัวสร้าง Vue:

 var vm = new vue ({// ตัวเลือก})

อินสแตนซ์ VUE เป็นจริง ViewModel ที่อธิบายไว้ในโหมด MVVM - ดังนั้นชื่อตัวแปร VM จึงมักใช้ในเอกสาร

เมื่ออินสแตนซ์ Vue คุณจะต้องส่งผ่านวัตถุตัวเลือกซึ่งสามารถมีตัวเลือกเช่นข้อมูลแม่แบบองค์ประกอบการเมานต์วิธีการเบ็ดวัฏจักรชีวิต ฯลฯ ตัวเลือกทั้งหมดสามารถดูได้ในเอกสาร API

ตัวสร้าง Vue สามารถขยายเพื่อสร้างตัวสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้ด้วยตัวเลือกที่กำหนดไว้ล่วงหน้า:

 var myComponent = vue.extend ({// ตัวเลือกส่วนขยาย}) // ทั้งหมด `อินสแตนซ์ myComponent` จะถูกสร้างขึ้นด้วยตัวเลือกส่วนขยายที่กำหนดไว้ล่วงหน้า var myComponentInstance = new MyComponent ()

แม้ว่าอินสแตนซ์ส่วนขยายสามารถสร้างได้อย่างจำเป็น แต่ในกรณีส่วนใหญ่ตัวสร้างส่วนประกอบได้รับการลงทะเบียนเป็นองค์ประกอบที่กำหนดเองแล้วใช้อย่างประกาศในเทมเพลต เราจะอธิบายรายละเอียดระบบส่วนประกอบในภายหลัง ตอนนี้คุณเพียงแค่ต้องรู้ว่าส่วนประกอบ vue.js ทั้งหมดเป็นอินสแตนซ์ Vue ที่ขยายออกไป

คุณสมบัติและวิธีการ

แต่ละอินสแตนซ์ VUE จะพร็อกซีคุณสมบัติทั้งหมดในวัตถุข้อมูล:

 var data = {a: 1} var vm = new vue ({data: data}) vm.a === data.a // -> true // คุณสมบัติการตั้งค่าจะส่งผลกระทบต่อข้อมูลดั้งเดิม vm.a = 2data.a // -> 2 // ... ในทางกลับกัน

โปรดทราบว่ามีเพียงคุณสมบัติพร็อกซีเหล่านี้เท่านั้นที่ตอบสนองได้ หากมีการเพิ่มคุณสมบัติใหม่ลงในอินสแตนซ์หลังจากสร้างอินสแตนซ์จะไม่ทริกเกอร์การอัปเดตมุมมอง เราจะหารือเกี่ยวกับระบบการตอบสนองโดยละเอียดในภายหลัง

นอกเหนือจากคุณลักษณะข้อมูลเหล่านี้อินสแตนซ์ Vue ยังเปิดเผยแอตทริบิวต์และวิธีการอินสแตนซ์ที่มีประโยชน์บางอย่าง คุณสมบัติและวิธีการเหล่านี้มีคำนำหน้า $ เพื่อแยกความแตกต่างจากแอตทริบิวต์ข้อมูลของพร็อกซี ตัวอย่างเช่น:

 var data = {a: 1} var vm = new vue ({el: '#example', ข้อมูล: data}) vm. $ data === data // -> truevm. $ el === document.getElementById ('ตัวอย่าง') // `vm.a` มีการเปลี่ยนแปลง})

อ้างถึงเอกสาร API เพื่อดูคุณสมบัติและวิธีการอินสแตนซ์ทั้งหมด

อินสแตนซ์ Lifecycle

อินสแตนซ์ VUE มีชุดของขั้นตอนการเริ่มต้นเมื่อมันถูกสร้างขึ้น - ตัวอย่างเช่นมันต้องมีการสร้างการสังเกตข้อมูลการรวบรวมเทมเพลตและการสร้างการเชื่อมโยงข้อมูลที่จำเป็น ในกระบวนการมันจะเรียกตะขอวงจรชีวิตบางอย่างให้โอกาสในการใช้งานสำหรับตรรกะที่กำหนดเอง ตัวอย่างเช่นตะขอที่สร้างขึ้นจะถูกเรียกหลังจากอินสแตนซ์ถูกสร้างขึ้น:

 var vm = new vue ({data: {a: 1}, สร้าง: function () {// `this 'ชี้ไปที่ VM อินสแตนซ์ console.log (' a คือ: ' + this.a)}) // ->" a คือ: 1 "

นอกจากนี้ยังมีตะขออื่น ๆ ที่เรียกว่าในขั้นตอนต่าง ๆ ของวงจรชีวิตอินสแตนซ์เช่นคอมไพล์พร้อมถูกทำลาย ตะขอนี้ชี้ไปที่อินสแตนซ์ VUE ที่เรียกว่า ผู้ใช้บางคนอาจถามว่า vue.js มีแนวคิดของ "คอนโทรลเลอร์" หรือไม่? คำตอบคือไม่ ตรรกะที่กำหนดเองของส่วนประกอบสามารถแบ่งออกเป็นตะขอเหล่านี้

ไดอะแกรมวงจรชีวิต

รูปต่อไปนี้แสดงวงจรชีวิตของอินสแตนซ์ คุณไม่จำเป็นต้องคิดทุกอย่างทันที แต่มันจะช่วยได้ในอนาคต

บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น