title: Vue
date: 2018-03-29 13:39:09
tags:
Vue2是一個典型的MVVM框架竟块，模型（Model）只是一個普通的javascript對象衰粹， 修改它則視圖（View）會自動更新剑勾，這種設計使得狀態(tài)管理變得簡單而直觀巍棱。
Vue實現(xiàn)數(shù)據(jù)綁定的效果遗契，需要三大模塊：
- Observer：能夠對數(shù)據(jù)對象的所有屬性進行監(jiān)聽潘明，一旦變動可拿到最新值通知訂閱者行剂。
- Compile：對每個元素節(jié)點的指令進行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)钳降，以及綁定響應的更新函數(shù)
- Watcher：訂閱者硼讽，作為連接Observer和compile的橋梁，能夠訂閱并且受到每個屬性變動的通知牲阁，執(zhí)行指令綁定的響應更新函數(shù)固阁，從而更新視圖
Observer
Observer的核心是通過Object.defineProperty()來監(jiān)聽數(shù)據(jù)的變動，這個函數(shù)內(nèi)部可以定義setter和getter城菊，每當數(shù)據(jù)發(fā)生變動時备燃，就會觸發(fā)setter，這時候Oberver就會通知訂閱者凌唬，訂閱者就是Watchter并齐，更新響應的視圖。
Watcher
Watcher訂閱者作為Observer和Compile之間通信的橋梁客税，主要做下面幾個事：
- 在自身實例化時往屬性訂閱器（dep）里面添加自己
- 自身必須要有一個update()方法
- 待屬性變動况褪，dep.notice()通知時，能調(diào)用自身的update方法更耻，并且觸發(fā)Compile中綁定的回調(diào)
Compile
Compile主要做的事情就是解析模板指令测垛，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖秧均，并將每個節(jié)點對應的指令綁定更新函數(shù)食侮，添加監(jiān)聽數(shù)據(jù)的訂閱者号涯。
