摘要:今天,就我們就來一步步解析響應式的原理,并且來實現一個簡單的。當然,這個也只是一個簡單的,來說明響應式的原理,真實的源碼會更加復雜,因為加了很多其他邏輯。接下來我可能會將其與聯系起來,實現和語法。
從很久之前就已經接觸過了angularjs了,當時就已經了解到,angularjs是通過臟檢查來實現數據監測以及頁面更新渲染。之后,再接觸了vue.js,當時也一度很好奇vue.js是如何監測數據更新并且重新渲染頁面。今天,就我們就來一步步解析vue.js響應式的原理,并且來實現一個簡單的demo。
首先,先讓我們來了解一些基礎知識。
基礎知識 Object.definePropertyes5新增了Object.defineProperty這個api,它可以允許我們為對象的屬性來設定getter和setter,從而我們可以劫持用戶對對象屬性的取值和賦值。比如以下代碼:
const obj = { }; let val = "cjg"; Object.defineProperty(obj, "name", { get() { console.log("劫持了你的取值操作啦"); return val; }, set(newVal) { console.log("劫持了你的賦值操作啦"); val = newVal; } }); console.log(obj.name); obj.name = "cwc"; console.log(obj.name);
我們通過Object.defineProperty劫持了obj[name]的取值和賦值操作,因此我們就可以在這里做一些手腳啦,比如說,我們可以在obj[name]被賦值的時候觸發更新頁面操作。
發布訂閱模式發布訂閱模式是設計模式中比較常見的一種,其中有兩個角色:發布者和訂閱者。多個訂閱者可以向同一發布者訂閱一個事件,當事件發生的時候,發布者通知所有訂閱該事件的訂閱者。我們來看一個例子了解下。
class Dep { constructor() { this.subs = []; } // 增加訂閱者 addSub(sub) { if (this.subs.indexOf(sub) < 0) { this.subs.push(sub); } } // 通知訂閱者 notify() { this.subs.forEach((sub) => { sub.update(); }) } } const dep = new Dep(); const sub = { update() { console.log("sub1 update") } } const sub1 = { update() { console.log("sub2 update"); } } dep.addSub(sub); dep.addSub(sub1); dep.notify(); // 通知訂閱者事件發生,觸發他們的更新函數動手實踐
我們了解了Object.defineProperty和發布訂閱者模式后,我們不難可以想到,vue.js是基于以上兩者來實現數據監聽的。
vue.js首先通過Object.defineProperty來對要監聽的數據進行getter和setter劫持,當數據的屬性被賦值/取值的時候,vue.js就可以察覺到并做相應的處理。
通過訂閱發布模式,我們可以為對象的每個屬性都創建一個發布者,當有其他訂閱者依賴于這個屬性的時候,則將訂閱者加入到發布者的隊列中。利用Object.defineProperty的數據劫持,在屬性的setter調用的時候,該屬性的發布者通知所有訂閱者更新內容。
接下來,我們來動手實現(詳情可以看注釋):
class Observer { constructor(data) { // 如果不是對象,則返回 if (!data || typeof data !== "object") { return; } this.data = data; this.walk(); } // 對傳入的數據進行數據劫持 walk() { for (let key in this.data) { this.defineReactive(this.data, key, this.data[key]); } } // 創建當前屬性的一個發布實例,使用Object.defineProperty來對當前屬性進行數據劫持。 defineReactive(obj, key, val) { // 創建當前屬性的發布者 const dep = new Dep(); /* * 遞歸對子屬性的值進行數據劫持,比如說對以下數據 * let data = { * name: "cjg", * obj: { * name: "zht", * age: 22, * obj: { * name: "cjg", * age: 22, * } * }, * }; * 我們先對data最外層的name和obj進行數據劫持,之后再對obj對象的子屬性obj.name,obj.age, obj.obj進行數據劫持,層層遞歸下去,直到所有的數據都完成了數據劫持工作。 */ new Observer(val); Object.defineProperty(obj, key, { get() { // 若當前有對該屬性的依賴項,則將其加入到發布者的訂閱者隊列里 if (Dep.target) { dep.addSub(Dep.target); } return val; }, set(newVal) { if (val === newVal) { return; } val = newVal; new Observer(newVal); dep.notify(); } }) } } // 發布者,將依賴該屬性的watcher都加入subs數組,當該屬性改變的時候,則調用所有依賴該屬性的watcher的更新函數,觸發更新。 class Dep { constructor() { this.subs = []; } addSub(sub) { if (this.subs.indexOf(sub) < 0) { this.subs.push(sub); } } notify() { this.subs.forEach((sub) => { sub.update(); }) } } Dep.target = null; // 觀察者 class Watcher { /** *Creates an instance of Watcher. * @param {*} vm * @param {*} keys * @param {*} updateCb * @memberof Watcher */ constructor(vm, keys, updateCb) { this.vm = vm; this.keys = keys; this.updateCb = updateCb; this.value = null; this.get(); } // 根據vm和keys獲取到最新的觀察值 get() { Dep.target = this; const keys = this.keys.split("."); let value = this.vm; keys.forEach(_key => { value = value[_key]; }); this.value = value; Dep.target = null; return this.value; } update() { const oldValue = this.value; const newValue = this.get(); if (oldValue !== newValue) { this.updateCb(oldValue, newValue); } } } let data = { name: "cjg", obj: { name: "zht", }, }; new Observer(data); // 監聽data對象的name屬性,當data.name發現變化的時候,觸發cb函數 new Watcher(data, "name", (oldValue, newValue) => { console.log(oldValue, newValue); }) data.name = "zht"; // 監聽data對象的obj.name屬性,當data.obj.name發現變化的時候,觸發cb函數 new Watcher(data, "obj.name", (oldValue, newValue) => { console.log(oldValue, newValue); }) data.obj.name = "cwc"; data.obj.name = "dmh";結語
這樣,一個簡單的響應式數據監聽就完成了。當然,這個也只是一個簡單的demo,來說明vue.js響應式的原理,真實的vue.js源碼會更加復雜,因為加了很多其他邏輯。
接下來我可能會將其與html聯系起來,實現v-model、computed和{{}}語法。代碼地址 有興趣的歡迎來一起研究探討下。
本文地址在->本人博客地址, 歡迎給個 start 或 follow
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108634.html
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:超出此時間則渲染錯誤組件。元素節點總共有種類型,為表示是普通元素,為表示是表達式,為表示是純文本。 實戰 - 插件 form-validate {{ error }} ...
閱讀 923·2023-04-26 01:34
閱讀 3356·2023-04-25 20:58
閱讀 3260·2021-11-08 13:22
閱讀 2108·2019-08-30 14:17
閱讀 2522·2019-08-29 15:27
閱讀 2673·2019-08-29 12:45
閱讀 2996·2019-08-29 12:26
閱讀 2811·2019-08-28 17:51