您好,登錄后才能下訂單哦!
前言:最近團(tuán)隊(duì)需要做一個(gè)分享,腳進(jìn)腦子,不知如何分享。最后想著之前一直想研究一下 vue 源碼,今天剛好 “借此機(jī)會(huì)” 研究一下。
網(wǎng)上研究vue數(shù)據(jù)綁定的文章已經(jīng)非常多了,但是自己寫(xiě)一遍,敲一遍demo和看別人的文章是完全不同的,so……搬運(yùn)工來(lái)了
目前數(shù)據(jù)綁定主要有以下三種實(shí)現(xiàn)方式:
1. 臟值檢查(angular.js) 輪詢(xún)檢測(cè)數(shù)據(jù)變化
DOM事件,譬如用戶輸入文本,點(diǎn)擊按鈕等。( ng-click )
2、Object.defineProperty劫持對(duì)象的get、set,從而實(shí)現(xiàn)對(duì)數(shù)據(jù)的監(jiān)控。 (vue)
3、發(fā)布/訂閱者模式實(shí)現(xiàn)數(shù)據(jù)與視圖的自動(dòng)同步
Object.defineProperty的優(yōu)點(diǎn)
Object.defineProperty的用法
var a = {}; Object.defineProperty(a, "b", { set: function (newValue) { console.log("我被賦值了!" + newValue); }, get: function () { console.log("我被取值了!"); return 2 } }) a.b = 3; //我被賦值了! console.log(a.b); //我被取值了! //打印 2
由上面的例子看出,Object.defineProperty 傳人3個(gè)參數(shù)
第一個(gè): a對(duì)象
第二個(gè): a對(duì)象里面的b屬性
第三個(gè): 屬性比較多,列舉有用的 value,set,get,configurable
數(shù)據(jù)綁定原理:
1、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽(tīng)器Observer,對(duì)數(shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽(tīng),如有變動(dòng)則拿到最新值并通知 dep數(shù)組
2、實(shí)現(xiàn)一個(gè)指令解析器Compile,對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析,根據(jù)指令模板替換數(shù)據(jù)
3、實(shí)現(xiàn)一個(gè)dep數(shù)組 ,能夠訂閱并收到每個(gè)屬性變動(dòng)的通知,執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù),更新視圖
1. 實(shí)現(xiàn)observer
var data = {name: 'beidan'}; observe(data); data.name = 'test'; // 監(jiān)聽(tīng)到值變化了 beidan 變成 test function observe(data) { if (!data || typeof data !== 'object') { return; } // 取出所有屬性遍歷 Object.keys(data).forEach(function(key) { defineReactive(data, key, data[key]); }); }
function defineReactive(data, key, val) { Object.defineProperty(data, key, { enumerable: true, // 可枚舉 configurable: false, // 不能再define get: function() { return val; }, set: function(newVal) { console.log('監(jiān)聽(tīng)到值變化了 ', val, ' 變成 ', newVal); val = newVal; } }); }
2. 維護(hù)一個(gè)數(shù)組
function Dep() { this.subs = []; } Dep.prototype = { addSub: function (sub) { this.subs.push(sub); }, notify: function (val) { this.subs.forEach(function (sub) { sub.update(val) }); } }; function defineReactive(data, key, val) { Object.defineProperty(data, key, { …… set: function(newVal) { if (val === newVal) return; console.log('監(jiān)聽(tīng)到值變化了 ', val, ' 變成 ', newVal); val = newVal; dep.notify(val); // 通知所有訂閱者 } }); }
3. compile
bindText: function () { var textDOMs = this.el.querySelectorAll('[v-text]'), bindText,_context = this; for (var i = 0; i < textDOMs.length; i++) { bindText = textDOMs[i].getAttribute('v-text'); textDOMs[i].innerHTML = this.data[bindText]; var val = textDOMs[i] var up = function (text) { val.innerText = text } _context.dep.addSub({ value: textDOMs[i], update: up }); } },
最后,附上源碼 github https://github.com/beidan/vue_bind
參考鏈接:
https://www.jb51.net/article/103297.htm
https://www.jb51.net/article/99129.htm
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。