前端每日一題（10.18題目+10.17答案）

說一下在 Vue2.x 中如何檢測數(shù)組的變化？

Vue2.x 中實現(xiàn)檢測數(shù)組變化的方法，是將數(shù)組的常用方法進(jìn)行了重寫。Vue 將 data 中的數(shù)組進(jìn)行了原型鏈重寫，指向了自己定義的數(shù)組原型方法。這樣當(dāng)調(diào)用數(shù)組 api 時，可以通知依賴更新。如果數(shù)組中包含著引用類型，會對數(shù)組中的引用類型再次遞歸遍歷進(jìn)行監(jiān)控。這樣就實現(xiàn)了監(jiān)測數(shù)組變化。

流程:

1. 初始化傳入 data 數(shù)據(jù)執(zhí)行 initData
2. 將數(shù)據(jù)進(jìn)行觀測 new Observer
3. 將數(shù)組原型方法指向重寫的原型
4. 深度觀察數(shù)組中的引用類型

有兩種情況無法檢測到數(shù)組的變化。

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

不過這兩種場景都有對應(yīng)的解決方案。

• 利用索引設(shè)置數(shù)組項的替代方案

//使用該方法進(jìn)行更新視圖
vm.$set，Vue.set的一個別名
vm.$set(vm.items, indexOfItem, newValue)

• 修改數(shù)組的長度的替代方案

//使用該方法進(jìn)行更新視圖
Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)