title: Vue 更新data選項(xiàng)中的數(shù)組
date: 2018-12-18 18:05:19
tags: [Vue]
categories: Vue
疑問(wèn)
最近看到一道面試題泼各，如下：
var vm = new Vue({
data: {
items: [1, 2, 3]
}
})
vm.items[1] = 'x'
vm.items.length = 2
這樣寫(xiě)有什么問(wèn)題凸椿？那應(yīng)該怎么寫(xiě)？
我看到這道題時(shí)并不覺(jué)得有什么問(wèn)題。在Vue中啰脚，一旦響應(yīng)式數(shù)據(jù)發(fā)生改變扒磁，setter 不是會(huì)發(fā)通知給 watcher 嗎？
解答
后來(lái)我才知道，這樣子寫(xiě)的話 Vue 不會(huì)更新該數(shù)組數(shù)據(jù)對(duì)應(yīng)的視圖痊硕。
請(qǐng)先閱讀完官方文檔的 深入響應(yīng)式原理，再看下面：
- 數(shù)據(jù)確實(shí)更新了押框，但視圖沒(méi)有更新岔绸，那就說(shuō)明 Vue 并沒(méi)有檢測(cè)到該數(shù)據(jù)更新了
- 其實(shí)是數(shù)組的問(wèn)題，在 Vue 中它比較特殊橡伞。
- 我們知道盒揉，Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行
getter/setter轉(zhuǎn)化過(guò)程，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 轉(zhuǎn)換它兑徘，這樣才能讓數(shù)據(jù)是響應(yīng)式的刚盈。 - 往深了說(shuō)，其實(shí) Vue 在我們的data對(duì)象上都會(huì)定義一個(gè)ob屬性指向新創(chuàng)建的Observer對(duì)象挂脑，以此對(duì)數(shù)據(jù)設(shè)置監(jiān)控器藕漱。但由于現(xiàn)代 JavaScript 的限制（底層原理不明）欲侮，
Object.Observe支持的不好，Vue 無(wú)法對(duì)數(shù)組進(jìn)行Observer對(duì)象創(chuàng)建肋联，因此不能檢測(cè)到數(shù)組對(duì)象的變化威蕉。 - 不過(guò) Vue 給我們提供了別的方法，具體見(jiàn)下面橄仍。
解決方法
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
vm.items.splice(newLength)
