作者 |?hfhan

來源 |?https://segmentfault.com/a/1190000015783546

問題描述：Vue檢測數據的變動是通過Object.defineProperty實現的，所以無法監聽數組的添加操作是可以理解的，因為是在構造函數中就已經為所有屬性做了這個檢測綁定操作。

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

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

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

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

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

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

---

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

var arr = [1]; arr[10000] = 1

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

其次，我要說的是，我也不知道這個限制是什么 ???? (????) ???? ╮( ??ω?? )╭

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

var arr = [1,2,3,4]

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

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

為了搞清楚這個問題，我用vue的源碼測試了下，下面是vue對數據監測的源碼：

可以看到，當數據是數組時，會停止對數據屬性的監測，我們修改一下源碼:

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

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

運行頁面

可以看到，運行了6次get，我們數組長度為3，也就是說數組被遍歷了兩遍。兩遍不多，頁面渲染一次，可能多次觸發一個數據的監聽事件，哪怕這個數據只用了一次，具體的需要看尤大代碼怎么寫的。

就拿這個來說，當監聽的數據為數組時，會運行dependArray函數(代碼在上面圖中get的實現里)，這個函數里對數組進行了遍歷取值操作，所以會多3遍get，這里主要是vue對data中arr數組的監聽觸發了dependArray函數。

當我們點擊其中一個元素的時候，比如我點擊的是3。

可以看到會先運行一次set，然后數據更新，重新渲染頁面，數組又是被遍歷了兩遍。

但是！！！數組確實變成響應式的了，也就是說js語法功能并不會限制數組的監測。

這里我們是用長度為3的數組測試的，當我把數組長度增加到9時。

可以看到，運行了18次get，數組還是被遍歷了兩遍，點擊某個元素同理，渲染的時候也是被遍歷兩次。

有了上面的實驗，我的結論是數組在vue中是可以實現響應式更新的，但是不明白尤大是出于什么考慮，沒有加入這一功能，希望有知道的大佬們不吝賜教

---

2018-07-27補充

github上提問了尤大

總結

以上是生活随笔為你收集整理的arr数组怎么取值_记一次思否问答的问题思考：Vue为什么不能检测数组变动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。