前言
本篇文章主要研究Vue的雙向數(shù)據(jù)綁定的學(xué)習(xí)筆記耿战。具體細(xì)節(jié)請參考《剖析Vue原理&實現(xiàn)雙向綁定MVVM》巴帮。
原理
數(shù)據(jù)劫持:采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式晶密，通過Object.defineProperty() 來劫持各個屬性的setter鱼喉，getter秀鞭，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)扛禽。
實現(xiàn)原理
1锋边、數(shù)據(jù)監(jiān)聽器Observer，能夠?qū)?shù)據(jù)對象的所有屬性進(jìn)行監(jiān)聽编曼，如有變動可拿到最新值并通知訂閱者
2豆巨、指令解析器Compile，對每個元素節(jié)點的指令進(jìn)行掃描和解析掐场，根據(jù)指令模板替換數(shù)據(jù)往扔，以及綁定相應(yīng)的更新函數(shù)
3、Watcher熊户，作為連接Observer和Compile的橋梁萍膛，能夠訂閱并收到每個屬性變動的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)敏弃，從而更新視圖
4卦羡、mvvm入口函數(shù)，結(jié)合Observer麦到、Compile和Watcher
其他雙向數(shù)據(jù)綁定的方法
臟值檢查:angular.js 是通過臟值檢測的方式比對數(shù)據(jù)是否有變更绿饵，來決定是否更新視圖，最簡單的方式就是通過 setInterval() 定時輪詢檢測數(shù)據(jù)變動瓶颠。
發(fā)布者-訂閱者模式：般通過sub, pub的方式實現(xiàn)數(shù)據(jù)和視圖的綁定監(jiān)聽拟赊，更新數(shù)據(jù)方式通常做法是 vm.set('property', value)。這里有篇詳細(xì)的文章粹淋。
