把一個(gè)普通的 JavaScript 對(duì)象傳入 Vue 實(shí)例作為 data 選項(xiàng)，Vue 將遍歷此對(duì)象所有的 property环揽，并使用 Object.defineProperty 把這些 property 全部轉(zhuǎn)為 getter/setter。Object.defineProperty 是 ES5 中一個(gè)無(wú)法 shim 的特性通今，這也就是 Vue 不支持 IE8 以及更低版本瀏覽器的原因派哲。
這些 getter/setter 對(duì)用戶(hù)來(lái)說(shuō)是不可見(jiàn)的储矩，但是在內(nèi)部它們讓 Vue 能夠追蹤依賴(lài)，在 property 被訪問(wèn)和修改時(shí)通知變更。這里需要注意的是不同瀏覽器在控制臺(tái)打印數(shù)據(jù)對(duì)象時(shí)對(duì) getter/setter 的格式化并不同，所以建議安裝 vue-devtools 來(lái)獲取對(duì)檢查數(shù)據(jù)更加友好的用戶(hù)界面。
每個(gè)組件實(shí)例都對(duì)應(yīng)一個(gè) watcher 實(shí)例，它會(huì)在組件渲染的過(guò)程中把“接觸”過(guò)的數(shù)據(jù) property 記錄為依賴(lài)。之后當(dāng)依賴(lài)項(xiàng)的 setter 觸發(fā)時(shí)，會(huì)通知 watcher垦藏，從而使它關(guān)聯(lián)的組件重新渲染厚掷。
由于 JavaScript 的限制，Vue 不能檢測(cè) 對(duì)象 和 數(shù)組 的變化冒黑。
關(guān)于對(duì)象
Vue 無(wú)法檢測(cè) property 的添加或移除田绑。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì) property 執(zhí)行 getter/setter 轉(zhuǎn)化，所以 property 必須在 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)式的
對(duì)于已經(jīng)創(chuàng)建的實(shí)例掩驱，Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式 property。但是豁延，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對(duì)象添加響應(yīng)式 property昙篙。例如，對(duì)于：
Vue.set(vm.someObject, 'b', 2)
還可以使用 vm.$set 實(shí)例方法诱咏，這也是全局 Vue.set 方法的別名：
this.$set(this.someObject,'b',2)
有時(shí)可能需要為已有對(duì)象賦值多個(gè)新 property苔可，如使用 Object.assign() 或 _.extend()。但是袋狞，這樣添加到對(duì)象上的新 property 不會(huì)觸發(fā)更新焚辅。在這種情況下，你應(yīng)該用原對(duì)象與要混合進(jìn)去的對(duì)象的 property 一起創(chuàng)建一個(gè)新的對(duì)象苟鸯。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
關(guān)于數(shù)組
Vue 不能檢測(cè)以下數(shù)組的變動(dòng)：
- 當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)同蜻，例如：vm.items[indexOfItem] = newValue
- 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength
舉個(gè)栗子：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是響應(yīng)性的
vm.items.length = 2 // 不是響應(yīng)性的
為了解決第一類(lèi)問(wèn)題早处，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果湾蔓，同時(shí)也將在響應(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 的一個(gè)別名：
vm.$set(vm.items, indexOfItem, newValue)
為了解決第二類(lèi)問(wèn)題砌梆，你可以使用 splice：
vm.items.splice(newLength)
異步更新隊(duì)列
Vue 在更新 DOM 時(shí)是異步執(zhí)行的默责。只要偵聽(tīng)到數(shù)據(jù)變化，Vue 將開(kāi)啟一個(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 和 setImmediate，如果執(zhí)行環(huán)境不支持怜校，則會(huì)采用 setTimeout(fn, 0) 代替间影。
當(dāng)設(shè)置 vm.someData = 'new value'，該組件不會(huì)立即重新渲染茄茁。當(dāng)刷新隊(duì)列時(shí)，組件會(huì)在下一個(gè)事件循環(huán)“tick”中更新巩割。多數(shù)情況我們不需要關(guān)心這個(gè)過(guò)程裙顽，但是如果你想基于更新后的 DOM 狀態(tài)來(lái)做點(diǎn)什么，這就可能會(huì)有些棘手宣谈。雖然 Vue.js 通常鼓勵(lì)開(kāi)發(fā)人員使用“數(shù)據(jù)驅(qū)動(dòng)”的方式思考愈犹，避免直接接觸 DOM，但是有時(shí)我們必須要這么做闻丑。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM漩怎，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)。這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用嗦嗡。
