這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)vue.js中怎么實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
從策劃到設(shè)計(jì)制作,每一步都追求做到細(xì)膩,制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、國(guó)際域名空間、雅安服務(wù)器托管、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。從new一個(gè)實(shí)例開始談起
網(wǎng)上的很多源碼解讀都是從 Observer 開始的,而我會(huì)從 new 一個(gè)MVVM實(shí)例開始,按照程序執(zhí)行順序去解釋或許更容易理解。先來(lái)看一個(gè)簡(jiǎn)單的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div class="test"> <p>{{user.name}}</p> <p>{{user.age}}</p> </div> <script type="text/javascript" src="hue.js"></script> <script type="text/javascript"> let vm = new Hue({ el: '.test', data: { user: { name: 'Jack', age: '18' } } }); </script> </body> </html>
接下來(lái)都將以其為例來(lái)分析。下面來(lái)看一個(gè)簡(jiǎn)略的 MVVM 的實(shí)現(xiàn),在此將其命名為 hue。為了方便起見,為 data 屬性設(shè)置了一個(gè)代理,通過(guò) vm._data 來(lái)訪問(wèn) data 的屬性顯得麻煩且冗余,通過(guò)代理,可以很好地解決這個(gè)問(wèn)題,在注釋中也有說(shuō)明。添加完屬性代理后,調(diào)用了一個(gè) observe 函數(shù),這一步做的就是 Observer 的屬性劫持了,這一步具體怎么實(shí)現(xiàn),暫時(shí)先不展開。先記住他為 data 的屬性添加了 getter 和 setter。
function Hue(options) { this.$options = options || {}; let data = this._data = this.$options.data, self = this; Object.keys(data).forEach(function(key) { self._proxyData(key); }); observe(data); self.$compile = new Compile(self, options.el || document.body); } // 為 data 做了一個(gè)代理, // 訪問(wèn) vm.xxx 會(huì)觸發(fā) vm._data[xxx] 的getter,取得 vm._data[xxx] 的值, // 為 vm.xxx 賦值則會(huì)觸發(fā) vm._data[xxx] 的setter Hue.prototype._proxyData = function(key) { let self = this; Object.defineProperty(self, key, { configurable: false, enumerable: true, get: function proxyGetter() { return self._data[key]; }, set: function proxySetter(newVal) { self._data[key] = newVal; } }); };
再往下看,最后一步 new 了一個(gè) Compile,下面我們就來(lái)講講 Compile。
Compile
new Compile(self, options.el || document.body) 這一行代碼中,第一個(gè)參數(shù)是當(dāng)前 Hue 實(shí)例,第二個(gè)參數(shù)是綁定的元素,在上面的示例中為class為 .test 的div。
關(guān)于 Compile,這里只實(shí)現(xiàn)最簡(jiǎn)單的 textContent 的綁定。而 Compile 的代碼沒(méi)什么難點(diǎn),很輕易就能讀懂,所做的就是解析 DOM,并添加 Watcher 訂閱。關(guān)于 DOM 的解析,先將根節(jié)點(diǎn) el 轉(zhuǎn)換成文檔碎片 fragment 進(jìn)行解析編譯操作,解析完成后,再將 fragment 添加回原來(lái)的真實(shí) DOM 節(jié)點(diǎn)中。來(lái)看看這部分的代碼:
function Compile(vm, el) { this.$vm = vm; this.$el = this.isElementNode(el) ? el : document.querySelector(el); if (this.$el) { this.$fragment = this.node2Fragment(this.$el); this.init(); this.$el.appendChild(this.$fragment); } } Compile.prototype.node2Fragment = function(el) { let fragment = document.createDocumentFragment(), child; // 也許有同學(xué)不太理解這一步,不妨動(dòng)手寫個(gè)小例子觀察一下他的行為 while (child = el.firstChild) { fragment.appendChild(child); } return fragment; }; Compile.prototype.init = function() { // 解析 fragment this.compileElement(this.$fragment); };
以上面示例為例,此時(shí)若打印出 fragment,可觀察到其包含兩個(gè)p元素:
<p>{{user.name}}</p> <p>{{user.age}}</p>
下一步就是解析 fragment,直接看代碼及注釋吧:
Compile.prototype.compileElement = function(el) { let childNodes = Array.from(el.childNodes), self = this; childNodes.forEach(function(node) { let text = node.textContent, reg = /\{\{(.*)\}\}/; // 若為 textNode 元素,且匹配 reg 正則 // 在上例中會(huì)匹配 '{{user.name}}' 及 '{{user.age}}' if (self.isTextNode(node) && reg.test(text)) { // 解析 textContent,RegExp.$1 為匹配到的內(nèi)容,在上例中為 'user.name' 及 'user.age' self.compileText(node, RegExp.$1); } // 遞歸 if (node.childNodes && node.childNodes.length) { self.compileElement(node); } }); }; Compile.prototype.compileText = function(node, exp) { // this.$vm 即為 Hue 實(shí)例,exp 為正則匹配到的內(nèi)容,即 'user.name' 或 'user.age' compileUtil.text(node, this.$vm, exp); }; let compileUtil = { text: function(node, vm, exp) { this.bind(node, vm, exp, 'text'); }, bind: function(node, vm, exp, dir) { // 獲取更新視圖的回調(diào)函數(shù) let updaterFn = updater[dir + 'Updater']; // 先調(diào)用一次 updaterFn,更新視圖 updaterFn && updaterFn(node, this._getVMVal(vm, exp)); // 添加 Watcher 訂閱 new Watcher(vm, exp, function(value, oldValue) { updaterFn && updaterFn(node, value, oldValue); }); }, // 根據(jù) exp,獲得其值,在上例中即 'vm.user.name' 或 'vm.user.age' _getVMVal: function(vm, exp) { let val = vm; exp = exp.trim().split('.'); exp.forEach(function(k) { val = val[k]; }); return val; } }; let updater = { // Watcher 訂閱的回調(diào)函數(shù) // 在此即更新 node.textContent,即 update view textUpdater: function(node, value) { node.textContent = typeof value === 'undefined' ? '' : value; } };
正如代碼中所看到的,Compile 在解析到 {{xxx}} 后便添加了 xxx 屬性的訂閱,即 new Watcher(vm, exp, callback)。理解了這一步后,接下來(lái)就需要了解怎么實(shí)現(xiàn)相關(guān)屬性的訂閱了。先從 Observer 開始談起。
Observer
從最簡(jiǎn)單的情況來(lái)考慮,即不考慮數(shù)組元素的變化。暫時(shí)先不考慮 Dep 與 Observer 的聯(lián)系。先看看 Observer 構(gòu)造函數(shù):
function Observer(data) { this.data = data; this.walk(data); } Observer.prototype.walk = function(data) { const keys = Object.keys(data); // 遍歷 data 的所有屬性 for (let i = 0; i < keys.length; i++) { // 調(diào)用 defineReactive 添加 getter 和 setter defineReactive(data, keys[i], data[keys[i]]); } };
接下來(lái)通過(guò) Object.defineProperty 方法給所有屬性添加 getter 和 setter,就達(dá)到了我們的目的。屬性有可能也是對(duì)象,因此需要對(duì)屬性值進(jìn)行遞歸調(diào)用。
function defineReactive(obj, key, val) { // 對(duì)屬性值遞歸,對(duì)應(yīng)屬性值為對(duì)象的情況 let childObj = observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function() { // 直接返回屬性值 return val; }, set: function(newVal) { if (newVal === val) { return; } // 值發(fā)生變化時(shí)修改閉包中的 val, // 保證在觸發(fā) getter 時(shí)返回正確的值 val = newVal; // 對(duì)新賦的值進(jìn)行遞歸,防止賦的值為對(duì)象的情況 childObj = observe(newVal); } }); }
最后補(bǔ)充上 observe 函數(shù),也即 Hue 構(gòu)造函數(shù)中調(diào)用的 observe 函數(shù):
function observe(val) { // 若 val 是對(duì)象且非數(shù)組,則 new 一個(gè) Observer 實(shí)例,val 作為參數(shù) // 簡(jiǎn)單點(diǎn)說(shuō):是對(duì)象就繼續(xù)。 if (!Array.isArray(val) && typeof val === "object") { return new Observer(val); } }
這樣一來(lái)就對(duì) data 的所有子孫屬性(不知有沒(méi)有這種說(shuō)法。。)都進(jìn)行了“劫持”。顯然到目前為止,這并沒(méi)什么用,或者說(shuō)如果只做到這里,那么和什么都不做沒(méi)差別。于是 Dep 上場(chǎng)了。我認(rèn)為理解 Dep 與 Observer 和 Watcher 之間的聯(lián)系是最重要的,先來(lái)談?wù)?Dep 在 Observer 里做了什么。
Observer & Dep
在每一次 defineReactive 函數(shù)被調(diào)用之后,都會(huì)在閉包中新建一個(gè) Dep 實(shí)例,即 let dep = new Dep()。Dep 提供了一些方法,先來(lái)說(shuō)說(shuō) notify 這個(gè)方法,它做了什么事?就是在屬性值發(fā)生變化的時(shí)候通知 Dep,那么我們的代碼可以增加如下:
function defineReactive(obj, key, val) { let childObj = observe(val); const dep = new Dep(); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function() { return val; }, set: function(newVal) { if (newVal === val) { return; } val = newVal; childObj = observe(newVal); // 發(fā)生變動(dòng) dep.notify(); } }); }
如果僅考慮 Observer 與 Dep 的聯(lián)系,即有變動(dòng)時(shí)通知 Dep,那么這里就算完了,然而在 vue.js 的源碼中,我們還可以看到一段增加在 getter 中的代碼:
// ... get: function() { if (Dep.target) { dep.depend(); } return val; } // ...
這個(gè) depend 方法呢,它又做了啥?答案是為閉包中的 Dep 實(shí)例添加了一個(gè) Watcher 的訂閱,而 Dep.target 又是啥?他其實(shí)是一個(gè) Watcher 實(shí)例,???一臉懵逼,先記住就好,先看一部份的 Dep 源碼:
// 標(biāo)識(shí)符,在 Watcher 中有用到,先不用管 let uid = 0; function Dep() { this.id = uid++; this.subs = []; } Dep.prototype.depend = function() { // 這一步相當(dāng)于做了這么一件事:this.subs.push(Dep.target) // 即添加了 Watcher 訂閱,addDep 是 Watcher 的方法 Dep.target.addDep(this); }; // 通知更新 Dep.prototype.notify = function() { // this.subs 的每一項(xiàng)都為一個(gè) Watcher 實(shí)例 this.subs.forEach(function(sub) { // update 為 Watcher 的一個(gè)方法,更新視圖 // 沒(méi)錯(cuò),實(shí)際上這個(gè)方法最終會(huì)調(diào)用到 Compile 中的 updaterFn, // 也即 new Watcher(vm, exp, callback) 中的 callback sub.update(); }); }; // 在 Watcher 中調(diào)用 Dep.prototype.addSub = function(sub) { this.subs.push(sub); }; // 初始時(shí)引用為空 Dep.target = null;
也許看到這還是一臉懵逼,沒(méi)關(guān)系,接著往下。大概有同學(xué)會(huì)疑惑,為什么要把添加 Watcher 訂閱放在 getter 中,接下來(lái)我們來(lái)說(shuō)說(shuō)這 Watcher 和 Dep 的故事。
Watcher & Dep
先讓我們回顧一下 Compile 做的事,解析 fragment,然后給相應(yīng)屬性添加訂閱:new Watcher(vm, exp, cb)。new 了這個(gè) Watcher 之后,Watcher 怎么辦呢,就有了下面這樣的對(duì)話:
Watcher:hey Dep,我需要訂閱 exp 屬性的變動(dòng)。
Dep:這我可做不到,你得去找 exp 屬性中的 dep,他能做到這件事。
Watcher:可是他在閉包中啊,我無(wú)法和他聯(lián)系。
Dep:你拿到了整個(gè) Hue 實(shí)例 vm,又知道屬性 exp,你可以觸發(fā)他的 getter 啊,你在 getter 里動(dòng)些手腳不就行了。
Watcher:有道理,可是我得讓 dep 知道是我訂閱的啊,不然他通知不到我。
Dep:這個(gè)簡(jiǎn)單,我?guī)湍?,你每次觸發(fā) getter 前,把你的引用告訴 Dep.target 就行了。記得辦完事后給 Dep.target 置空。
于是就有了上面 getter 中的代碼:
// ... get: function() { // 是否是 Watcher 觸發(fā)的 if (Dep.target) { // 是就添加進(jìn)來(lái) dep.depend(); } return val; } // ...
現(xiàn)在再回頭看看 Dep 部分的代碼,是不是好理解些了。如此一來(lái), Watcher 需要做的事情就簡(jiǎn)單明了了:
function Watcher(vm, exp, cb) { this.$vm = vm; this.cb = cb; this.exp = exp; this.depIds = new Set(); // 返回一個(gè)用于獲取相應(yīng)屬性值的函數(shù) this.getter = parseGetter(exp.trim()); // 調(diào)用 get 方法,觸發(fā) getter this.value = this.get(); } Watcher.prototype.get = function() { const vm = this.$vm; // 將 Dep.target 指向當(dāng)前 Watcher 實(shí)例 Dep.target = this; // 觸發(fā) getter let value = this.getter.call(vm, vm); // Dep.target 置空 Dep.target = null; return value; }; Watcher.prototype.addDep = function(dep) { const id = dep.id; if (!this.depIds.has(id)) { // 添加訂閱,相當(dāng)于 dep.subs.push(this) dep.addSub(this); this.depIds.add(id); } }; function parseGetter(exp) { if (/[^\w.$]/.test(exp)) { return; } let exps = exp.split("."); return function(obj) { for (let i = 0; i < exps.length; i++) { if (!obj) return; obj = obj[exps[i]]; } return obj; }; }
最后還差一部分,即 Dep 通知變化后,Watcher 的處理,具體的函數(shù)調(diào)用流程是這樣的:dep.notify() -> sub.update(),直接上代碼:
Watcher.prototype.update = function() { this.run(); }; Watcher.prototype.run = function() { let value = this.get(); let oldVal = this.value; if (value !== oldVal) { this.value = value; // 調(diào)用回調(diào)函數(shù)更新視圖 this.cb.call(this.$vm, value, oldVal); } };
上述就是小編為大家分享的vue.js中怎么實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)站標(biāo)題:vue.js中怎么實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定-創(chuàng)新互聯(lián)
當(dāng)前鏈接:http://bm7419.com/article38/djhhsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、網(wǎng)站制作、微信公眾號(hào)、網(wǎng)站收錄、網(wǎng)站策劃、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容