Vue中響應式原理的示例分析

這篇文章主要介紹了Vue中響應式原理的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Vue 嘴顯著的特性之一便是響應式系統(tǒng)（reactivity system），模型層（model）只是普通JavaScript對象，修改它則更新視圖（view）。

Vue 響應式系統(tǒng)的底層細節(jié)

如何追蹤變化

把一個普通的JavaScript對象傳給Vue實例的data選項，Vue將遍歷此對象的所有屬性，并使用Object.defineProperty 把這些屬性全部轉為 getter/setter.Object.defineProperty是僅ES5支持，并無法shim的特性，這也就是為什么Vue不支持IE8以及更低版本瀏覽器的原因。

用戶看不到getter/setter,但是在內部他們讓Vue跟蹤依賴，在屬性被訪問和修改時通知變化。這里需要注意的問題是瀏覽器控制臺在打印數據對象時 getter/setter 的格式化并不同,所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。

每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴。之后當依賴項的setter 被調用時，會調用 watcher 重新計算，從而致使它關聯(lián)的組件得以更新。

變化檢測問題

受現代JavaScript的限制，Vue不能檢測到對象屬性的添加和刪除。由于Vue會在初始化實例時對屬性執(zhí)行getter/setter轉化過程，所以屬性必須在data對象上存在才能讓Vue轉化它，這樣才能讓它是相應的。例如：

var vm=nrew Vue({

　　el:'#app',

　　data:{

　　　　a:1

　　}

});

//vm.a是響應的

vm.b=3;//vm.b是非響應的

Vue不允許在已經創(chuàng)建的實例上動態(tài)添加新的根級響應式屬性（root-lever reactive property）.然而它可以使用Vue.set(object,key,value)方法

將響應屬性添加到嵌套的對象上：

Vue.set(object.someObject,'b',2);

你哈可以使用vm.$set實例方法，這也是全局Vue.set方法的別名：

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

有時你想向已有對象上添加一些屬性，例如使用Object.assign()或_.extend()方法來添加屬性。但是，添加到對象上新屬性不會觸發(fā)更新。這這種情況下可以常見一個新的對象，讓它包含元對象的屬性和新的屬性：

//替換 ‘object.assign(this.someObject,{a:1,b:2})'

this.someObject=Object.assign({},this.someObject,{a:1,b:2});

聲明響應式屬性

由于Vue不允許動態(tài)添加根級響應式屬性，所以你必須在初始化實例前聲明根級響應式屬性，哪怕只是一個空值：

var vm = new Vue({
 data: {
 // 聲明 message 為一個空值字符串
 message: ''
 },
 template: '<div>{{ message }}</div>'
})
// 之后設置 `message` 
vm.message = 'Hello!'

如果在data選項中未聲明message,Vue將警告你渲染函數在視圖訪問的屬性不存在。

這樣的限制在背后是有其技術原因的，它消除了在依賴項跟蹤系統(tǒng)中一類邊界情況，也使Vue實例在類型檢查系統(tǒng)的幫助下運行的更高效。而且在代碼可維護性方面也有一點重要的考慮： data 對象就像組件狀態(tài)的概要，提前聲明所有額響應式屬性，可以讓組件代碼在以后重新閱讀或者其他開發(fā)人員閱讀時更易于被理解。

異步更新隊列

Vue異步執(zhí)行DOM更新。只要觀察到數據變化，Vue將開啟一個隊列，并緩沖在同一個事件循環(huán)中發(fā)生的所有數據改變。如果同一個watcher被多次觸發(fā)，只會一次推入到隊列中。這種在緩沖時去除重復數據對于避免不必要的計算和DOM操作上非常重要。然后，在下一個事件循環(huán)‘tick'中，Vue刷新隊列并執(zhí)行實際工作。Vue在內部嘗試對異步隊列使用原生的Promise.then,MutationObserver,如果執(zhí)行環(huán)境不支持，會采用setTimeout(fn,0)代替。

例如，當你設置vm.someData='new value',該組件不會立即重新渲染。當刷新隊列時，組件會在事件循環(huán)隊列清空時的下一個‘tick'更新。多數情況下我們不需要關心這個過程，但是如果你想在DOM狀態(tài)更新后做點兒什么，這就可能會有些棘手。雖然Vue.js通常鼓勵開發(fā)人員沿著‘數據驅動'的方式思考，避免直接接觸DOM,但是有時我們確實要這么做。為了在數據變化之后等待Vue完成更新DOM，可以在數據變化之后立即使用Vue.nextTick(callback).這樣回調函數在DOM更新完成后就會調用。例如：

<div id="example">{{message}}</div>

var vm = new Vue({
 el: '#example',
 data: {
 message: '123'
 }
})
vm.message = 'new message' // 更改數據
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
 vm.$el.textContent === 'new message' // true
})

在組件中使用vm.$nextTick()實例方法特別方便，因為它不需要全局Vue,并且回調函數中的 this 將自動綁定到當前的Vue實例上：

Vue.component('example', {
 template: '<span>{{ message }}</span>',
 data: function () {
 return {
  message: 'not updated'
 }
 },
 methods: {
 updateMessage: function () {
  this.message = 'updated'
  console.log(this.$el.textContent) // => '沒有更新'
  this.$nextTick(function () {
  console.log(this.$el.textContent) // => '更新完成'
  })
 }
 }
})

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue中響應式原理的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!