談?wù)勯喿x了vue深入響應(yīng)式原理后的理解
1.響應(yīng)式原理
在生成vue實例時痒筒，為對傳入的data進行遍歷，使用Object.defineProperty把這些屬性轉(zhuǎn)為getter/setter.
Object.defineProperty 是 ES5 中一個無法 shim 的特性肩狂，這也就是 Vue 不支持 IE8 以及更低版本瀏覽器的原因摘完。
每個vue實例都有一個watcher實例姥饰，它會在實例渲染時記錄這些屬性，并在setter觸發(fā)時重新渲染孝治。
Vue 無法檢測到對象屬性的添加或刪除
Vue 不允許動態(tài)添加根級別的響應(yīng)式屬性列粪。但是审磁，可以使用 Vue.set(object, propertyName, value)方法向嵌套對象添加響應(yīng)式屬性。
2.聲明響應(yīng)式屬性
由于 Vue 不允許動態(tài)添加根級響應(yīng)式屬性岂座，所以你必須在初始化實例前聲明所有根級響應(yīng)式屬性态蒂，哪怕只是一個空值。
如果你未在 data 選項中聲明 message费什，Vue 將警告你渲染函數(shù)正在試圖訪問不存在的屬性钾恢。
3.異步更新隊列
vue更新dom時是異步執(zhí)行的
數(shù)據(jù)變化、更新是在主線程中同步執(zhí)行的鸳址；在偵聽到數(shù)據(jù)變化時瘩蚪，watcher將數(shù)據(jù)變更存儲到異步隊列中，當(dāng)本次數(shù)據(jù)變化稿黍，即主線成任務(wù)執(zhí)行完畢疹瘦，異步隊列中的任務(wù)才會被執(zhí)行（已去重）。
如果你在js中更新數(shù)據(jù)后立即去操作DOM巡球，這時候DOM還未更新言沐；vue提供了nextTick接口來處理這樣的情況，它的參數(shù)是一個回調(diào)函數(shù)酣栈，會在本次DOM更新完成后被調(diào)用险胰。
使用方法：
- 1.在組件內(nèi)使用 vm.$nextTick() 實例方法特別方便，因為它不需要全局 Vue矿筝，并且回調(diào)函數(shù)中的 this 將自動綁定到當(dāng)前的 Vue 實例上：
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '未更新'
}
},
methods: {
updateMessage: function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})
}
}
})
- 2.因為
$nextTick()返回一個Promise對象鸯乃，所以你可以使用新的 ES2016 async/await 語法完成相同的事情：
methods: {
updateMessage: async function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}
