Vue2中的更改檢測警告

該頁面僅適用于 Vue 2.x 及更低版本，并假定你已經(jīng)閱讀了響應(yīng)性部分。請先閱讀該部分。

由于 JavaScript 的限制，有些 Vue 無法檢測的更改類型。但是，有一些方法可以規(guī)避它們以維持響應(yīng)性。

#對于對象

Vue 無法檢測到 property 的添加或刪除。由于 Vue 在實(shí)例初始化期間執(zhí)行 getter/setter 轉(zhuǎn)換過程，因此必須在 data 對象中存在一個 property，以便 Vue 對其進(jìn)行轉(zhuǎn)換并使其具有響應(yīng)式。例如：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 現(xiàn)在是響應(yīng)式的


vm.b = 2
// `vm.b` 不是響應(yīng)式的

對于已經(jīng)創(chuàng)建的實(shí)例，Vue 不允許動態(tài)添加根級別的響應(yīng)式 property。但是，可以使用 Vue.set(object，propertyName，value) 方法向嵌套對象添加響應(yīng)式 property：

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

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

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

有時你可能需要為已有對象賦值多個新 property，比如使用 Object.assign() 或 _.extend()。但是，這樣添加到對象上的新 property 不會觸發(fā)更新。在這種情況下，你應(yīng)該用原對象與要混合進(jìn)去的對象的 property 一起創(chuàng)建一個新的對象。

// 而不是 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

#對于數(shù)組

Vue 不能檢測以下數(shù)組的變動：

1. 當(dāng)你利用索引直接設(shè)置一個數(shù)組項時，例如：vm.items[indexOfItem] = newValue
2. 當(dāng)你修改數(shù)組的長度時，例如：vm.items.length = newLength

例如：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是響應(yīng)式的
vm.items.length = 2 // 不是響應(yīng)式的

為了解決第一種問題，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時也將在響應(yīng)性系統(tǒng)內(nèi)觸發(fā)狀態(tài)更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

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

vm.$set(vm.items, indexOfItem, newValue)

為了解決第二種問題，你可以使用 splice：

vm.items.splice(newLength)

#聲明響應(yīng)式 property

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

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

如果你未在 data 選項中聲明 message，Vue 將警告你渲染函數(shù)正在試圖訪問不存在的 property。

這樣的限制在背后是有其技術(shù)原因的，它消除了在依賴項跟蹤系統(tǒng)中的一類邊界情況，也使組件實(shí)例能更好地配合類型檢查系統(tǒng)工作。但與此同時在代碼可維護(hù)性方面也有一點(diǎn)重要的考慮：data 對象就像組件的狀態(tài)結(jié)構(gòu) (schema)。提前聲明所有的響應(yīng)式 property，可以讓組件代碼在未來修改或給其他開發(fā)人員閱讀時更易于理解。

#異步更新隊列

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

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

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

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
})

在組件內(nèi)使用 vm.$nextTick() 實(shí)例方法特別方便，因?yàn)樗恍枰?Vue，并且回調(diào)函數(shù)中的 this 將自動綁定到當(dāng)前的組件實(shí)例上：

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

因?yàn)?$nextTick() 返回一個 Promise 對象，所以你可以使用新的 ES2017 async/await 語法完成相同的事情：

  methods: {
    updateMessage: async function () {
      this.message = 'updated'
      console.log(this.$el.textContent) // => 'not updated'
      await this.$nextTick()
      console.log(this.$el.textContent) // => 'updated'
    }
  }