vue的data數(shù)據(jù)雙向綁定原理及實現(xiàn)

Object.defineProperty()

該方法會直接在一個對象上定義一個新屬性括尸,或者修改一個對象的現(xiàn)有屬性闷尿, 并返回這個對象潮瓶。
例:

//在console.log(book.name)同時,直接給書加一個書號
var Book = {};
var name = '';
Object.defineProperty(Book,'name',{
    set:function(value) {
        name = value;
        console.log('你取了一個書名叫:'+value);
    },
    get:function() {
        console.log('get方法被監(jiān)聽到');
        return '<'+name+'>';
    }
});
Book.name = '人性的弱點';  //你取了一個書名叫:人性的弱點
console.log(Book.name); //<人性的弱點>

此處代碼轉(zhuǎn)自

利用這個特性,vue遍歷傳入每個實例的data對象
源碼

//遍歷傳入實例的data對象的屬性酷麦,將其設(shè)置為Vue對象的訪問器屬性
 function observe(obj,vm){
     Object.keys(obj).forEach(function(key){
         defineReactive(vm,key,obj[key]);
     });
 }
 //設(shè)置為訪問器屬性贯莺,并在其getter和setter函數(shù)中重慢,使用訂閱發(fā)布模式测僵。互相監(jiān)聽朴读。
 function defineReactive(obj,key,val){
     //這里用到了觀察者模式,它定義了一種一對多的關(guān)系屹徘,讓多個觀察者監(jiān)聽一個主題對象,這個主題對象的狀態(tài)發(fā)生改變時會通知所有觀察者對象衅金,觀察者對象就可以更新自己的狀態(tài)噪伊。
     //實例化一個主題對象,對象中有空的觀察者列表
     var dep = new Dep();
     //將data的每一個屬性都設(shè)置為Vue對象的訪問器屬性氮唯,屬性名和data中相同
     //所以每次修改Vue.data的時候鉴吹,都會調(diào)用下邊的get和set方法。然后會監(jiān)聽v-model的input事件惩琉,當(dāng)改變了input的值豆励,就相應(yīng)的改變Vue.data的數(shù)據(jù),然后觸發(fā)這里的set方法
     Object.defineProperty(obj,key,{
         get: function(){
             //Dep.target指針指向watcher瞒渠,增加訂閱者watcher到主體對象Dep
             if(Dep.target){
                 dep.addSub(Dep.target);
             }
             return val;
         },
         set: function(newVal){
             if(newVal === val){
                 return
             }
             val = newVal;
             //console.log(val);
             //給訂閱者列表中的watchers發(fā)出通知
             dep.notify();
         }
     });
 }
 
 //主題對象Dep構(gòu)造函數(shù)
 function Dep(){
     this.subs = [];
 }
 //Dep有兩個方法良蒸,增加訂閱者  和  發(fā)布消息
 Dep.prototype = {
     addSub: function(sub){
         this.subs.push(sub);
     },
     notify: function(){
         this.subs.forEach(function(sub){
             sub.update();
         });
     }
 }

通過訂閱發(fā)布消息的方式,監(jiān)聽每個數(shù)據(jù)的改變

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末伍玖,一起剝皮案震驚了整個濱河市诚啃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌私沮,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,348評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異仔燕,居然都是意外死亡造垛,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,122評論 2 385
  • 文/潘曉璐 我一進店門晰搀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來五辽,“玉大人,你說我怎么就攤上這事外恕「硕海” “怎么了?”我有些...
    開封第一講書人閱讀 156,936評論 0 347
  • 文/不壞的土叔 我叫張陵鳞疲,是天一觀的道長罪郊。 經(jīng)常有香客問我,道長尚洽,這世上最難降的妖魔是什么悔橄? 我笑而不...
    開封第一講書人閱讀 56,427評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮腺毫,結(jié)果婚禮上癣疟,老公的妹妹穿的比我還像新娘。我一直安慰自己潮酒,他們只是感情好睛挚,可當(dāng)我...
    茶點故事閱讀 65,467評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著急黎,像睡著了一般扎狱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上叁熔,一...
    開封第一講書人閱讀 49,785評論 1 290
  • 那天委乌,我揣著相機與錄音,去河邊找鬼荣回。 笑死遭贸,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的心软。 我是一名探鬼主播壕吹,決...
    沈念sama閱讀 38,931評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼删铃!你這毒婦竟也來了耳贬?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,696評論 0 266
  • 序言:老撾萬榮一對情侶失蹤猎唁,失蹤者是張志新(化名)和其女友劉穎咒劲,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,141評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡腐魂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,483評論 2 327
  • 正文 我和宋清朗相戀三年帐偎,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蛔屹。...
    茶點故事閱讀 38,625評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡削樊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出兔毒,到底是詐尸還是另有隱情漫贞,我是刑警寧澤,帶...
    沈念sama閱讀 34,291評論 4 329
  • 正文 年R本政府宣布育叁,位于F島的核電站迅脐,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏擂红。R本人自食惡果不足惜仪际,卻給世界環(huán)境...
    茶點故事閱讀 39,892評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望昵骤。 院中可真熱鬧树碱,春花似錦、人聲如沸变秦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蹦玫。三九已至赎婚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間樱溉,已是汗流浹背挣输。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留福贞,地道東北人撩嚼。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像挖帘,于是被迫代替她去往敵國和親完丽。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,492評論 2 348

推薦閱讀更多精彩內(nèi)容