vue的數據驅動與數據響應原理

 

數據驅動：DOM是數據的一種天然映射

若是沒有ViewModel那麼視圖和model是怎麼樣交互的呢？好比咱們經過ajax從後臺獲取數據，爲了讓視圖改變咱們要手動觸發DOM的改變，或者經過前端交互改變數據，爲了讓視圖也發生變化，仍然須要手動觸發這些DOM的改變，手動改變DOM是一個繁瑣的過程，也比較容易出錯，而使用view以後就省去了手動操做DOM變化的步驟了，在vue裏，你只須要改變數據，vue.js經過
directive（指令）去對DOM作一層封裝，當數據發生變化，會通知指令去修改對應的DOM。數據驅動DOM變化，DOM是數據的一種天然映射。vue.js還會對數據作一些監聽，當咱們修改視圖的時候，vue.js監聽到這些變化，從而改變數據，這樣也就造成了數據的雙向綁定。

 

 

數據響應原理： 看看數據改變是如何驅動數據自動更新的

　　

加入咱們有一份數據a.b，在一個vue對象實例化的過程當中，會給a.b這份數據經過es5的 Object.defineProperty() 屬性，添加了一個Setter和 Getter，同時vue.js會對模板作編譯，解析生成一個指令對象，這裏是一個v-text指令，
每一個指令對象都會關聯一個Watcher，當咱們對指令對應的表達式a.b作求值的時候，就會觸發了Getter，這裏咱們就會把依賴收集到這個Watcher裏面，當我再次改變了a.b的時候，就會觸發它的Setter，會通知到被關聯的Watcher，而後Watcher就會再次對a.b求值，計算對比新舊值。當發現值改變了，Watcher又會通知到指令，調用指令的Updata方法，因爲指令是對DOM的封裝，因此會調用原生DOM的方法，去更新視圖，這樣咱們就完成了數據改變到視圖更新的一個自動過程。