通過這幅圖我來進行簡要說明:
一 初始化階段
1.我們在開始便建立了mvvm建構函式,在vue生命週期的初始化階段,會生成兩個物件:observer和compile.
2.observer物件的主要作用是對data中所有的資料來進行劫持監視,這為後來的頁面更新起著很重要的作用.
3.compile物件的作用是解析傳進來的表示式和解析式,如:},v-class.
4. 初始化階段的observer物件在原始碼中會生成dep物件,dep物件是根據data中包含了多少個屬性來產生的,如:
w1w2
w3new mvvm(
}})這樣,就產生了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的操作,這樣會很方便.
vue的雙向資料繫結
原理 vue實現雙向資料繫結的原理就是利用了 object.defineproperty 這個方法重新定義了物件獲取屬性值 get 和設定屬性值 set 的操作來實現的。它接收三個引數，要操作的物件，要定義或修改的物件屬性名，屬性描述符。重點就是最後的屬性描述符。屬性描述符是乙個物件，主要有兩種形式...
Vue 的雙向資料繫結
model 如何改變view 從model 到view 的對映 data binding 這樣可以大量節省你人肉來update view的 view 又是如何改變model 的 從view 到 model 的事件監聽 dom listeners 這樣你的model 會隨著view觸發事件而改變 資料...
Vue的雙向資料繫結
資料雙向繫結，即當資料發生變化的時候，檢視也就發生變化，當檢視發生變化的時候，資料也會跟著同步變化。在vue裡面使用v model實現雙向資料繫結，原理是檢測使用者輸入，把輸入的值獲取到 然後同步更新給頁面的元素 v model的注意點 1.沒有簡寫形式 2.只有指定表單元素可以使用 input s...