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的方法,去更新視圖,這樣我們就完成了數據改變到視圖更新的一個自動過程。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM