之前關(guān)于 Vue 數(shù)據(jù)綁定原理的一點(diǎn)分析,最近需要回顧,就順便發(fā)到隨筆上了
成都創(chuàng)新互聯(lián)公司專(zhuān)注于??h網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供??h營(yíng)銷(xiāo)型網(wǎng)站建設(shè),??h網(wǎng)站制作、??h網(wǎng)頁(yè)設(shè)計(jì)、??h網(wǎng)站官網(wǎng)定制、小程序定制開(kāi)發(fā)服務(wù),打造??h網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供浚縣網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
在之前實(shí)現(xiàn)一個(gè)自己的Mvvm中,用 setter
來(lái)觀測(cè)model
,將界面上所有的 viewModel
綁定到 model
上。 當(dāng)model
改變,更新所有的viewModel
,將新值渲染到界面上 。同時(shí)監(jiān)聽(tīng)界面上通過(guò)v-model
綁定的所有 input
,并通過(guò) addEventListener
事件將新值更新到 model
上,以此來(lái)完成雙向綁定 。
但是那段程序除了用來(lái)理解 defineProperty
,其它一文不值。
這里我將解決表達(dá)式依賴(lài)這個(gè)問(wèn)題,vue 模板的編譯我會(huì)在下一節(jié)介紹 。
為數(shù)據(jù)定義 getter & setter
class Observer { constructor(data) { this._data = data; this.walk(this._data); } walk(data) { Object.keys(data).forEach((key) => { this.defineRective(data, key, data[key]) }) }; defineRective(vm, key, value) { var self = this; if (value && typeof value === "object") { this.walk(value); } Object.defineProperty(vm, key, { get: function() { return value; }, set: function(newVal) { if (value != newVal) { if (newVal && typeof newVal === "object") { self.walk(newVal); } value = newVal; } } }) } } module.exports = Observer;
這樣,就為每個(gè)屬性添加了 getter
和 setter
,當(dāng)屬性是一個(gè)對(duì)象,那么就遞歸添加。
一旦獲取屬性值或者為屬性賦值就會(huì)觸發(fā) get
或 set
,當(dāng)觸發(fā)了 set
,即model
變化,就可以發(fā)布一個(gè)消息,通知所有viewModel
更新。
defineRective(vm, key, value) { // 將這個(gè)屬性的依賴(lài)表達(dá)式存儲(chǔ)在閉包中。 var dep = new Dep(); var self = this; if (value && typeof value === "object") { this.walk(value); } Object.defineProperty(vm, key, { get: function() { return value; }, set: function(newVal) { if (value != newVal) { if (newVal && typeof newVal === "object") { self.walk(newVal); } value = newVal; // 通知所有的 viewModel 更新 dep.notify(); } } }) }
那么怎么定義 Dep
呢??
class Dep { constructor() { // 依賴(lài)列表 this.dependences = []; } // 添加依賴(lài) addDep(watcher) { if (watcher) { this.dependences.push(watcher); } } // 通知所有依賴(lài)更新 notify() { this.dependences.forEach((watcher) => { watcher.update(); }) } } module.exports = Dep;
這里的每個(gè)依賴(lài)就是一個(gè)Watcher
。
看看如何定義 Watcher
這里每一個(gè) Watcher
都會(huì)有一個(gè)唯一的id
號(hào),它擁有一個(gè)表達(dá)式和一個(gè)回調(diào)函數(shù) 。
比如 表達(dá)式 a +b
; 會(huì)在get 計(jì)算時(shí) 訪(fǎng)問(wèn) a
與 b
, 由于 JavaScript是單線(xiàn)程,任一時(shí)刻只有一處JavaScript代碼在執(zhí)行, 用Dep.target
作為一個(gè)全局變量來(lái)表示當(dāng)前 Watcher
的表達(dá)式,然后通過(guò) compute
訪(fǎng)問(wèn) a
,b
,觸發(fā) a
與b
的getter
,在 getter 里面將 Dep.target
添加為依賴(lài) 。
一旦 a
與 b
的set
觸發(fā),調(diào)用 update
函數(shù),更新依賴(lài)的值 。
var uid = 0; class Watcher { constructor(viewModel, exp, callback) { this.viewModel = viewModel; this.id = uid++; this.exp = exp; this.callback = callback; this.oldValue = ""; this.update(); } get() { Dep.target = this; var res = this.compute(this.viewModel, this.exp); Dep.target = null; return res; } update() { var newValue = this.get(); if (this.oldValue === newValue) { return; } // callback 里進(jìn)行Dom 的更新操作 this.callback(newValue, this.oldValue); this.oldValue = newValue; } compute(viewModel, exp) { var res = replaceWith(viewModel, exp); return res; } } module.exports = Watcher;
由于當(dāng)前表達(dá)式需要在 當(dāng)前的model下面執(zhí)行,所以 采用replaceWith 函數(shù)來(lái)代替 with 。
通過(guò)get 添加依賴(lài)
Object.defineProperty(vm, key, { get: function() { var watcher = Dep.target; if (watcher && !dep.dependences[watcher.id]) { dep.addDep(watcher); } return value; }, set: function(newVal) { if (value != newVal) { if (newVal && typeof newVal === "object") { self.walk(newVal); } value = newVal; dep.notify(); } } })
這種添加依賴(lài)的方式實(shí)在太巧妙了 。
這里我畫(huà)了一個(gè)圖來(lái)描述
最后通過(guò)一段代碼簡(jiǎn)單測(cè)試一下
const Observer = require('./Observer.js'); const Watcher = require('./watcher.js'); var data = { a: 10, b: { c: 5, d: { e: 20, } } } var observe = new Observer(data); var watcher = new Watcher(data, "a+b.c", function(newValue, oldValue) { console.log("new value is " + newValue); console.log("oldValue is " + oldValue); }); console.log("\r\n"); console.log("a has changed to 50,then the expr should has value 55"); data.a = 50; console.log("\r\n"); console.log("b.c has changed to 50,then the expr should has value 122"); data.b.c = 72;; console.log("\r\n"); console.log("b.c has reseted an object,then the expr should has value 80"); data.b = { c: 30 }
OK 大功告成
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前名稱(chēng):詳解Vue事件驅(qū)動(dòng)和依賴(lài)追蹤
當(dāng)前鏈接:http://bm7419.com/article16/pscjdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、網(wǎng)站內(nèi)鏈、企業(yè)建站、全網(wǎng)營(yíng)銷(xiāo)推廣、建站公司、軟件開(kāi)發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)