1.vue雙向數(shù)據(jù)綁定原理
vue.js采用的是數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式.利用Object.defineProperty來劫持對象,利用getter,setter在數(shù)據(jù)變動時發(fā)布消息給訂閱者,觸發(fā)相對應(yīng)的監(jiān)聽回調(diào)希坚，更新視圖.
2.實現(xiàn)數(shù)據(jù)綁定的方法大致有幾種
1.發(fā)布者-訂閱者模式:一般通過sub锦溪、pub的方式實現(xiàn)數(shù)據(jù)和視圖的綁定監(jiān)聽,更新數(shù)據(jù)的方式通常做法是vm.set('property',value)匿刮。我們更希望通過vm.prototype=value這種方式更新視圖數(shù)據(jù),同時自動跟新視圖.
2.臟值檢查:angular.js是通過臟值檢測的方式對比數(shù)據(jù)是否有變更，來決定視圖是否更新，最簡單的方式就是通過setInterval(),定時輪詢檢測數(shù)據(jù)變動,應(yīng)為setInterval太耗費(fèi)性能,所以angular只有在指定的事件觸發(fā)時進(jìn)入臟值檢查,大致如下:
1.DOM事件，譬如用戶輸入文本间校，點(diǎn)擊按鈕等.(ng-click)
2.XHR響應(yīng)事件($http)
3.瀏覽器Location變更事件($location)
4.Timer事件($timeout,$interval)
5.執(zhí)行$digest()或$apply()
3.數(shù)據(jù)劫持:vue.js則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的setter,getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者,觸發(fā)相應(yīng)的監(jiān)聽回調(diào).
3.vue雙向數(shù)據(jù)綁定(具體流程)
實現(xiàn)過程
首先對數(shù)據(jù)進(jìn)行劫持與監(jiān)聽,需要設(shè)置一個監(jiān)聽器Observer页慷，用來監(jiān)聽所有的屬性.如果屬性發(fā)生了變化,會通知消息訂閱器Dep(收集訂閱者),Dep通知訂閱者Watcher看是否需要更新.然后在監(jiān)聽Observer和訂閱者Watcher之間統(tǒng)一管理,觸發(fā)視圖更新.同時創(chuàng)建一個指令解析器Compile憔足，根據(jù)new Vue實例傳入的el綁定的元素，對它的子元素進(jìn)行掃描與解析差购，對相關(guān)指令對應(yīng)初始化一個訂閱者watcher存放在訂閱器中(Dep)四瘫，并替換模板數(shù)據(jù)或者綁定相對應(yīng)的函數(shù),如果當(dāng)訂閱者watcher接收到相對應(yīng)屬性的變化，就會執(zhí)行相對應(yīng)的更新函數(shù),從而更新視圖.
1.實現(xiàn)一個監(jiān)聽器Observer欲逃，用來劫持并監(jiān)聽所有的屬性找蜜，如果有變動就通知訂閱者.
2.實現(xiàn)一個訂閱者Watcher,收到屬性的變化通知并執(zhí)行相對應(yīng)的函數(shù)，從而更新視圖.
3.實現(xiàn)一個解析器Compile,可以掃描和解析每個節(jié)點(diǎn)的相關(guān)指令稳析，并初始化模板數(shù)據(jù)以及初始化相對應(yīng)的訂閱器.
下節(jié)Compile的簡單實現(xiàn)：http://www.reibang.com/p/6eb248664443
