小編給大家分享一下vue響應(yīng)式原理的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)企業(yè)建站,10年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁(yè)設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營(yíng)經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對(duì)于網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動(dòng)的思維在網(wǎng)頁(yè)中充分展現(xiàn)，通過(guò)對(duì)客戶行業(yè)精準(zhǔn)市場(chǎng)調(diào)研，為客戶提供的解決方案。

Vue最顯著的特性之一便是不太引人注意的響應(yīng)式系統(tǒng)(reactivity system)。模型層(model)只是普通JS對(duì)象，修改它則更新視圖(view)。這會(huì)讓狀態(tài)管理變得非常簡(jiǎn)單且直觀，不過(guò)理解它的工作原理以避免一些常見(jiàn)的問(wèn)題也是很重要的。

本文將詳細(xì)介紹Vue響應(yīng)式系統(tǒng)的底層細(xì)節(jié)。

追蹤變化

把一個(gè)普通JS對(duì)象傳給Vue實(shí)例的data選項(xiàng)，Vue將遍歷此對(duì)象所有的屬性，并使用Object.defineProperty把這些屬性全部轉(zhuǎn)為getter/setter。

Object.defineProperty是僅ES5支持，且無(wú)法shim的特性，這也就是為什么Vue不支持IE8瀏覽器的原因。

用戶看不到getter/setter，但是在內(nèi)部它們讓Vue追蹤依賴，在屬性被訪問(wèn)和修改時(shí)通知變化

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

變化檢測(cè)

受現(xiàn)代JS的限制（以及廢棄 Object.observe），Vue不能檢測(cè)到對(duì)象屬性的添加或刪除。由于Vue會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter轉(zhuǎn)化過(guò)程，所以屬性必須在data對(duì)象上存在才能讓Vue轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。

var vm = new Vue({
  data:{
  　　a:1
  }
})
// `vm.a` 是響應(yīng)的
vm.b = 2
// `vm.b` 是非響應(yīng)的

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

Vue.set(vm.someObject, 'b', 2)

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

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

有時(shí)想向已有對(duì)象上添加一些屬性，例如使用Object.assign()或 _.extend()方法來(lái)添加屬性。但是，添加到對(duì)象上的新屬性不會(huì)觸發(fā)更新。在這種情況下可以創(chuàng)建一個(gè)新的對(duì)象，讓它包含原對(duì)象的屬性和新的屬性。

// 代替 `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)添加根級(jí)響應(yīng)式屬性，所以必須在初始化實(shí)例前聲明根級(jí)響應(yīng)式屬性，哪怕只是一個(gè)空值。

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

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

這樣的限制在背后是有其技術(shù)原因的，它消除了在依賴項(xiàng)跟蹤系統(tǒng)中的一類邊界情況，也使Vue實(shí)例在類型檢查系統(tǒng)的幫助下運(yùn)行的更高效。

而且在代碼可維護(hù)性方面也有一點(diǎn)重要的考慮：data 對(duì)象就像組件狀態(tài)的概要，提前聲明所有的響應(yīng)式屬性，可以讓組件代碼在以后重新閱讀或其他開發(fā)人員閱讀時(shí)更易于被理解。

異步更新隊(duì)列

Vue異步執(zhí)行DOM更新。只要觀察到數(shù)據(jù)變化，Vue將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè)watcher被多次觸發(fā)，只會(huì)一次推入到隊(duì)列中。

這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和DOM操作上非常重要。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue刷新隊(duì)列并執(zhí)行實(shí)際（已去重的）工作。

Vue在內(nèi)部嘗試對(duì)異步隊(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è)過(guò)程，但是如果想在DOM狀態(tài)更新后做點(diǎn)什么，這就可能會(huì)有些棘手。

雖然Vue.js通常鼓勵(lì)開發(fā)人員沿著“數(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}}

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

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