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

10年積累的成都網(wǎng)站建設(shè)、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有遼寧免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

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

如何追蹤變化

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

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

每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對象，它會(huì)在組件渲染的過程中把屬性記錄為依賴。之后當(dāng)依賴項(xiàng)的setter 被調(diào)用時(shí)，會(huì)調(diào)用 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

變化檢測問題

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

var vm=nrew Vue({

　　el:'#app',

　　data:{

　　　　a:1

　　}

});

//vm.a是響應(yīng)的

vm.b=3;//vm.b是非響應(yīng)的

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

將響應(yīng)屬性添加到嵌套的對象上：

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

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

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

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

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

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

聲明響應(yīng)式屬性

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

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

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

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

異步更新隊(duì)列

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

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

{{message}}