Vue的數據綁定部分的簡要過程解釋

經過這幅圖我來進行簡要說明:
一 初始化階段

1.咱們在開始便建立了MVVM構造函數,在vue生命週期的初始化階段,會生成兩個對象:Observer和Compile.
2.Observer對象的主要做用是對data中全部的數據來進行劫持監視,這爲後來的頁面更新起着很重要的做用.
3.Compile對象的做用是解析傳進來的表達式和解析式,如:{{name}},V-class.
4. 初始化階段的Observer對象在源碼中會生成DEP對象,DEP對象是根據data中包含了多少個屬性來產生的,如:
<h1>{{name}}</h1>          w1
<h1>{{wife.name}}</h1>     w2
<p v-text="wife.age"></p>  w3

new MVVM({
  el: "#test",
  data: {                        
        name: 'laowang',         d1
        wife: {                  d2
            name: 'xiaozhaung'   d3
        }
  }
})
這樣,就產生了3個dep對象.
5.watcher的產生:Compile建立的由表達式和非事件指令的數量來決定
6.將watcher添加到dep中 相互關聯起來:
    d1指向w1;
    d2指向w2和w3 由於是同一屬性控制的兩個表達式或者非事件指令
7.這樣在初始化的階段 視圖也就初始化的產生了.

二 更新階段

8.數據發生改變以後,Observer監視到變化,並將變化發到dep中,隨着watcher也隨之變化,最後更新視圖.

三 小結

1.數據綁定,也能夠說明爲數據驅動,即當data中的數據發生改變時,頁面上對應使用該屬性或者經過該屬性計算出來的與數據相關的部分會作一個局部更新.簡單的說就是:數據變,頁面變.
2.數據綁定的兩個方向:
    a.初始化顯示:頁面(表達式/指令)能從data中取出數據進行解析並 顯示.
    b.更新顯示:更新data中的屬性數據--→頁面更新
3.vue框架操做起來簡單便捷,由於虛擬dom的產生,最大限度的減小了對dom的操做,這樣會很方便.

四 歡迎你們借鑑和審查