前言：最近團(tuán)隊(duì)需要做一個(gè)分享，腳進(jìn)腦子，不知如何分享。最后想著之前一直想研究一下 vue 源碼，今天剛好 “借此機(jī)會(huì)” 研究一下。
網(wǎng)上研究vue數(shù)據(jù)綁定的文章已經(jīng)非常多了，但是自己寫一遍，敲一遍demo和看別人的文章是完全不同的，so……搬運(yùn)工來了
目前數(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è)過程可能會(huì)循環(huán)幾次，一直到不再有數(shù)據(jù)變化發(fā)生后，將變更的數(shù)據(jù)發(fā)送到視圖，更新頁面展現(xiàn)
Object.defineProperty() 監(jiān)控對(duì)數(shù)據(jù)的操作，可以自動(dòng)觸發(fā)數(shù)據(jù)同步。并且，由于是在不同的數(shù)據(jù)上觸發(fā)同步，可以精確的將變更發(fā)送給綁定的視圖，而不是對(duì)所有的數(shù)據(jù)都執(zhí)行一次檢測(cè)。
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式