Vue中的響應式原理

vue最獨特的特性之一，是其非侵入性的響應式系統。

響應式原理：資料變，頁面變

vue實現資料雙向繫結主要是：採用資料劫持結合發布者-訂閱者模式的方式

當把乙個普通的js物件傳入vue例項作為data選項時，vue將遍歷此物件的所有屬性，並使用object.defineproperty把這些屬性全部轉為getter/setter。object.defineproperty

是es5中乙個無法shim的特性，這也是vue不支援ie8以及更低版本瀏覽器的原因。

object.defineproperty(obj, prop, descriptor)

// descriptor有兩種主要形式:資料描述符和訪問描述符，描述符必須是兩種形式之一，不能同時是兩者

// 資料描述符

descriptor:

// 訪問描述符

descriptor: , // 乙個給屬性提供 getter 的方法，如果沒有 getter 則為undefined

set () {} // 乙個給屬性提供 setter 的方法，如果沒有 setter 則為undefined

}

這些getter/setter對使用者來說是不可見，但是在內部它們讓vue能夠追蹤依賴，在屬性被訪問和修改時通知變更。

每個元件例項都對應乙個watcher例項，它會在元件渲染的過程中把『接觸』過的資料屬性記錄為依賴。之後當依賴項的setter/getter觸發時，會通知watcher，從而使它關聯的元件重新渲染。

受現代js的限制(而且object.observe----用於非同步地監視乙個物件的改變。當物件屬性被修改時，方法的**函式會提供乙個有序的修改流。也已經被廢棄), vue無法檢測到物件屬性的新增或刪除。所以屬性必須在data物件上存在才能讓vue將它轉換為響應式的。

對於已經建立的例項，vue不允許動態新增根級別的響應式屬性。但是可以通過使用，vue.set(object, propertyname, value) 方法向巢狀物件新增響應式屬性，內部使用的就是object.defineproperty。

vue.set(vm.someobject, 'b', 2)

還可以使用vm.$set例項方法，這也是全域性vue.set方法的別名：

this.$set(this.someobject, 'b', 2)

有時可能需要為已有物件賦值多個新屬性，比如使用object.assign()或_.extend()，但是，這樣新增到物件上的新屬性不會觸發更新。在這種情況下，可以讓屬性指向乙個新的有原物件於要混合進去的物件的屬性一起建立乙個新的物件。

this.someobject = object.assign({}, this.someobject, )

由於vue不允許動態新增根級響應式屬性，所以必須在初始化例項前宣告所有根級響應式屬性，哪怕只是乙個空值；如果未在data選項中宣告message，vue將警告渲染函式正在試圖訪問不存在的屬性。

這樣的限制在背後是有其技術原因的，它消除了在依賴項跟蹤系統中的一類邊界情況，也使 vue 例項能更好地配合型別檢查系統工作。但與此同時在**可維護性方面也有一點重要的考慮：data物件就像元件狀態的結構 (schema)。提前宣告所有的響應式屬性，可以讓元件**在未來修改或給其他開發人員閱讀時更易於理解。

vue在更新dom時是非同步執行的。只要偵聽到資料變化，vue將開啟乙個佇列，並緩衝在同一事件迴圈中發生的所有資料變更。如果同乙個watcher被多次觸發，只會被推入到佇列中一次。這種在緩衝時去除重複資料對於避免不必要的計算和dom操作是非常重要的。

然後，在下乙個事件迴圈『tick'中，vue重新整理佇列並執行實際(已去重)的工作。vue在內部對非同步佇列嘗試使用原生的promise.then、mutationobserver和setimmediate, 如果執行環境不支援，則會採用settimeout(fn, 0)代替。

因為元件會在下乙個事件迴圈』tick'中更新。所以如果想基於更新後的dom狀態來做點什麼，會有些棘手。為此，vue提供了nexttick，為了在資料變化之後等待vue完成更新dom，可以在資料變化之後立即使用vue.nexttick(callback)。這樣**函式將在dom更新完成後被呼叫。

dom結構：

change

js**：

function change() 
let data = 
let age = 2
let test = document.getelementbyid("test")
test.innerhtml = age
object.defineproperty(data, 'age', ,
set (params) 
})// 繫結watcher監聽
function wathcer () 
// 重新渲染dom
function renderdom(h)

參考：

Vue中的響應式原理

vue響應式布局 Vue 響應式原理

vue響應式原理

vue響應式原理

Vue中的響應式原理

vue響應式布局 Vue 響應式原理

vue響應式原理

vue響應式原理

相關推薦