為什麼直接修改陣列長度或設定陣列項的索引時，Vue不能檢測到陣列的變動？

1樓：陳小成

vue中的陣列的監聽不是通過Object.defineProperty來實現的，是通過對'push', 'pop','shift','unshift','splice', 'sort','reverse'這幾個改變陣列本身的方法執行後來通知監聽達到的，原始碼傳送門：https:

2樓：井底之蛙

其實說白了就是vue的監聽機制都是通過defineproperty來實現的，但是不能檢測物件新新增的屬性，物件可以初始化的時候就設定好屬性，不加新屬性，陣列也是物件，然而如果要求陣列初始化的時候就設定好所有屬性(索引)，不能新增索性(改變長度)，顯然是不可能的，那麼要陣列也就沒用了。

3樓：Roc.L

vue用defineproperty下的setter和getter方法做依賴跟蹤的。

MDN：

陣列的 length 屬性重定義是可能的，但是會受到一般的重定義限制。（length 屬性初始為 non-configurable，non-enumerable 以及 writable。對於乙個內容不變的陣列，改變其 length 屬性的值或者使它變為 non-writable 是可能的。

但是改變其可列舉性和可配置性或者當它是 non-writable 時嘗試改變它的值或是可寫性，這兩者都是不允許的。）然而，並不是所有的瀏覽器都允許 Array.length 的重定義。

簡單來說length的命名訪問器屬性set和get你不能動它，也就無法設定setter和getter

至於陣列下的索引是可以用setter和getter的但是為啥vue下索引也不允許更新呢？

因為length = 5的陣列，未必索引就有4，這個索引(屬性)不存在，就沒法setter了。

4樓：賀師俊

因為沒有辦法監聽任意屬性。

當然現在Proxy是可以做到這點的，不過乙個是相容性問題，另乙個是如果用了Proxy就是乙個新物件，跟現在Vue在原本物件上設定 getter/setter 的方式不同。