快捷導(dǎo)航

淺談Vue為什么不能檢測數(shù)組變動

更新時間：2019年10月14日 10:11:36 作者：hfhan

這篇文章主要介紹了淺談Vue為什么不能檢測數(shù)組變動，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

問題來源：https://segmentfault.com/q/1010000015780995

問題描述：Vue檢測數(shù)據(jù)的變動是通過Object.defineProperty實現(xiàn)的，所以無法監(jiān)聽數(shù)組的添加操作是可以理解的，因為是在構(gòu)造函數(shù)中就已經(jīng)為所有屬性做了這個檢測綁定操作。

但是官方的原文：由于 JavaScript 的限制， Vue 不能檢測以下變動的數(shù)組：

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

這句話是什么意思？我測試了下Object.defineProperty是可以通過索引屬性來設(shè)置屬性的訪問器屬性的，那為何做不了監(jiān)聽？

有些論壇上的人說因為數(shù)組長度是可變的，即使長度為5，但是未必有索引4，我就想問問這個答案哪里來的，修改length，新增的元素會被添加到最后，它的值為undefined，通過索引一樣可以獲取他們的值，怎么就叫做“未必有索引4”了呢？

既然知道數(shù)組的長度為何不能遍歷所有元素并通過索引這個屬性全部添加set和get不就可以同時更新視圖了嗎？

如果非要說的話，考慮到性能的問題，假設(shè)元素內(nèi)容只有4個有意義的值，但是長度確實1000，我們不可能為1000個元素做檢測操作。但是官方說的由于JS限制，我想知道這個限制是什么內(nèi)容？各位大大幫我解決下這個問題，感謝萬分

面對這個問題，我想說的是，首先，長度為1000，但只有4個元素的數(shù)組并不一定會影響性能，因為js中對數(shù)據(jù)的遍歷除了for循環(huán)還有forEach、map、filter、some等，除了for循環(huán)外(for,for...of)，其他的遍歷都是對鍵值的遍歷，也就是除了那四個元素外的空位并不會進(jìn)行遍歷(執(zhí)行回調(diào))，所以也就不會造成性能損耗，因為循環(huán)體中沒有操作的話，所帶來的性能影響可以忽略不計，下面是長度為10000，但只有兩個元素的數(shù)組分別使用for及forEach遍歷的結(jié)果：

var arr = [1]; arr[10000] = 1
function a(){
  console.time()
  for(var i = 0;i<arr.length;i++)console.log(1)
  console.timeEnd()
}
a(); //default: 567.1669921875ms
a(); //default: 566.2451171875ms

function b(){
  console.time()
  arr.forEach(item=>{console.log(2)})
  console.timeEnd()
}
b(); //default: 0.81982421875ms
b(); //default: 0.434814453125ms

可以看到結(jié)果非常明顯,不過，如果for循環(huán)中不做操作的話兩者速度差不多

其次，我要說的是，我也不知道這個限制是什么 (⇀‸↼‶) ╮( •́ω•̀ )╭

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性，并返回這個對象。數(shù)組的索引也是屬性，所以我們是可以監(jiān)聽到數(shù)組元素的變化的

var arr = [1,2,3,4]
arr.forEach((item,index)=>{
  Object.defineProperty(arr,index,{
    set:function(val){
      console.log('set')
      item = val
    },
    get:function(val){
      console.log('get')
      return item
    }
  })
})
arr[1]; // get 2
arr[1] = 1; // set 1

但是我們新增一個元素，就不會觸發(fā)監(jiān)聽事件，因為這個新屬性我們并沒有監(jiān)聽，刪除一個屬性也是。

再回到題主的問題，既然數(shù)組是可以被監(jiān)聽的，那為什么vue不能檢測vm.items[indexOfItem] = newValue導(dǎo)致的數(shù)組元素改變呢，哪怕這個下標(biāo)所對應(yīng)的元素是存在的，且被監(jiān)聽了的？

為了搞清楚這個問題，我用vue的源碼測試了下，下面是vue對數(shù)據(jù)監(jiān)測的源碼：

可以看到，當(dāng)數(shù)據(jù)是數(shù)組時，會停止對數(shù)據(jù)屬性的監(jiān)測，我們修改一下源碼:

使數(shù)據(jù)為數(shù)組時，依然監(jiān)測其屬性，然后在defineReactive函數(shù)中的get，set打印一些東西，方便我們知道調(diào)用了get以及set。這里加了個簡單判斷，只看數(shù)組元素的get，set

然后寫了一個簡單案例，主要測試使用vm.items[indexOfItem] = newValue改變數(shù)組元素能不能被監(jiān)測到，并響應(yīng)式的渲染頁面

運(yùn)行頁面

可以看到，運(yùn)行了6次get，我們數(shù)組長度為3，也就是說數(shù)組被遍歷了兩遍。兩遍不多，頁面渲染一次，可能多次觸發(fā)一個數(shù)據(jù)的監(jiān)聽事件，哪怕這個數(shù)據(jù)只用了一次，具體的需要看尤大代碼怎么寫的。就拿這個來說，當(dāng)監(jiān)聽的數(shù)據(jù)為數(shù)組時，會運(yùn)行dependArray函數(shù)(代碼在上面圖中g(shù)et的實現(xiàn)里)，這個函數(shù)里對數(shù)組進(jìn)行了遍歷取值操作，所以會多3遍get，這里主要是vue對data中arr數(shù)組的監(jiān)聽觸發(fā)了dependArray函數(shù)。

當(dāng)我們點(diǎn)擊其中一個元素的時候，比如我點(diǎn)擊的是3