淺析vue數(shù)據(jù)綁定
前言:最近團(tuán)隊(duì)需要做一個(gè)分享,腳進(jìn)腦子,不知如何分享。最后想著之前一直想研究一下 vue 源碼,今天剛好 “借此機(jī)會(huì)” 研究一下。
網(wǎng)上研究vue數(shù)據(jù)綁定的文章已經(jīng)非常多了,但是自己寫一遍,敲一遍demo和看別人的文章是完全不同的,so……搬運(yùn)工來(lái)了
目前數(shù)據(jù)綁定主要有以下三種實(shí)現(xiàn)方式:
1. 臟值檢查(angular.js) 輪詢檢測(cè)數(shù)據(jù)變化
DOM事件,譬如用戶輸入文本,點(diǎn)擊按鈕等。( ng-click )
- XHR響應(yīng)事件 ( $http )
- 瀏覽器Location變更事件 ( $location )
- Timer事件( $timeout , $interval )
- 執(zhí)行 $digest() 或 $apply()
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)
- “臟值檢測(cè)”——數(shù)據(jù)發(fā)生變更后,對(duì)于所有的數(shù)據(jù)和視圖的綁定關(guān)系進(jìn)行一次檢測(cè),識(shí)別是否有數(shù)據(jù)發(fā)生了改變,有變化進(jìn)行處理,可能進(jìn)一步引發(fā)其他數(shù)據(jù)的改變,所以這個(gè)過(guò)程可能會(huì)循環(huán)幾次,一直到不再有數(shù)據(jù)變化發(fā)生后,將變更的數(shù)據(jù)發(fā)送到視圖,更新頁(yè)面展現(xiàn)
- Object.defineProperty() 監(jiān)控對(duì)數(shù)據(jù)的操作,可以自動(dòng)觸發(fā)數(shù)據(jù)同步。并且,由于是在不同的數(shù)據(jù)上觸發(fā)同步,可以精確的將變更發(fā)送給綁定的視圖,而不是對(duì)所有的數(shù)據(jù)都執(zhí)行一次檢測(cè)。
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
參考鏈接:
http://www.dbjr.com.cn/article/103297.htm
http://www.dbjr.com.cn/article/99129.htm
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
如何使用el-table+el-tree+el-select動(dòng)態(tài)選擇對(duì)應(yīng)值
小編在做需求時(shí),遇到了在el-table表格中加入多條數(shù)據(jù),并且每條數(shù)據(jù)要通過(guò)el-select來(lái)選取相應(yīng)的值,做到動(dòng)態(tài)選擇,下面這篇文章主要給大家介紹了關(guān)于如何使用el-table+el-tree+el-select動(dòng)態(tài)選擇對(duì)應(yīng)值的相關(guān)資料,需要的朋友可以參考下2023-01-01在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決
我們?cè)陂_(kāi)web開(kāi)發(fā)的時(shí)候,經(jīng)常會(huì)使用到element或者uview-ui,下面這篇文章主要給大家介紹了關(guān)于在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2022-04-04Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁(yè)縮放滾動(dòng)問(wèn)題)
本文主要介紹了Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁(yè)縮放滾動(dòng)問(wèn)題),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05利用Vue模擬實(shí)現(xiàn)element-ui的分頁(yè)器效果
這篇文章主要為大家詳細(xì)介紹了如何利用Vue模擬實(shí)現(xiàn)element-ui的分頁(yè)器效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手嘗試一下2022-11-11基于vue-draggable 實(shí)現(xiàn)三級(jí)拖動(dòng)排序效果
這篇文章主要介紹了基于vue-draggable 實(shí)現(xiàn)三級(jí)拖動(dòng)排序效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01詳解如何實(shí)現(xiàn)Element樹形控件Tree在懶加載模式下的動(dòng)態(tài)更新
這篇文章主要介紹了詳解如何實(shí)現(xiàn)Element樹形控件Tree在懶加載模式下的動(dòng)態(tài)更新,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04在Vue3中使用localStorage保存數(shù)據(jù)的流程步驟
在前端開(kāi)發(fā)中,尤其是利用Vue3構(gòu)建現(xiàn)代Web應(yīng)用時(shí),掌握如何使用本地存儲(chǔ)(localStorage)來(lái)保存數(shù)據(jù)是非常重要的能力,在這篇博客中,我將詳細(xì)介紹如何在Vue3中使用localStorage保存數(shù)據(jù),并提供示例代碼來(lái)幫助理解,需要的朋友可以參考下2024-06-06