在Vue中，可以通過(guò)對(duì)data數(shù)據(jù)的監(jiān)測(cè)來(lái)實(shí)現(xiàn)對(duì)頁(yè)面顯示的更新。當(dāng)數(shù)據(jù)有變化時(shí)，Vue會(huì)自動(dòng)重新渲染頁(yè)面，以達(dá)到實(shí)時(shí)更新的效果。但是對(duì)于一般的數(shù)據(jù)類型，Vue無(wú)法自動(dòng)監(jiān)測(cè)其變化。具體來(lái)說(shuō)，Vue會(huì)在實(shí)例化時(shí)將每個(gè)屬性轉(zhuǎn)化為getter/setter，以便在數(shù)據(jù)變化時(shí)通知Vue。但是，當(dāng)我們直接設(shè)置數(shù)組中的某個(gè)元素時(shí)，例如修改數(shù)組中的第一個(gè)元素arr[0]，Vue無(wú)法自動(dòng)監(jiān)測(cè)其變化，從而無(wú)法重新渲染頁(yè)面。

var vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3]
}
})
vm.arr[0] = 4 // 頁(yè)面不會(huì)更新

為了解決這個(gè)問(wèn)題，Vue使用了Object.defineProperty()方法來(lái)劫持?jǐn)?shù)據(jù)變化，實(shí)現(xiàn)數(shù)據(jù)的監(jiān)測(cè)。當(dāng)用戶試圖改變數(shù)據(jù)時(shí)，Vue會(huì)攔截這個(gè)操作并執(zhí)行自己定義的處理函數(shù)，再更新視圖。

var obj = {}
var value = 1
Object.defineProperty(obj, 'key', {
get: function () {
console.log('get')
return value
},
set: function (newVal) {
console.log('set')
value = newVal
}
})
obj.key // get
obj.key = '123' // set

可以看到，當(dāng)屬性被get或者set時(shí)，Vue就可以派發(fā)Watcher實(shí)例來(lái)更新視圖。而對(duì)于數(shù)組而言，Vue則通過(guò)利用數(shù)組的方法來(lái)實(shí)現(xiàn)這個(gè)功能。具體來(lái)說(shuō)，Vue重寫(xiě)了數(shù)組的7個(gè)方法：push、pop、shift、unshift、splice、sort、reverse。然后再調(diào)用這些方法時(shí)，Vue能夠知道數(shù)據(jù)已經(jīng)改變，從而能夠重新渲染頁(yè)面。

vm.arr.push(4) // 頁(yè)面會(huì)更新

總的來(lái)說(shuō)，Vue數(shù)據(jù)監(jiān)測(cè)原理的實(shí)質(zhì)就是利用Object.defineProperty()劫持?jǐn)?shù)據(jù)變化，并通過(guò)派發(fā)Watcher實(shí)例來(lái)更新視圖，從而實(shí)現(xiàn)實(shí)時(shí)更新的效果。而對(duì)于數(shù)組而言，Vue則需要重寫(xiě)數(shù)組的方法，以便能夠重新渲染頁(yè)面。