vue中針對7個陣列方法的重寫

vue通過原型攔截的方式重寫了陣列的7個方法，首先獲取到這個陣列的observer。如果有新的值，就呼叫observearray對新的值進行監聽，然後呼叫notify，通知render watcher，執行update

核心：arraymethods 首先繼承了 array，然後對陣列中所有能改變陣列自身的方法，如 push、pop 等這些方法進行重寫。重寫後的方法會先執行它們本身原有的邏輯，並對能增加陣列長度的 3 個方法 push、unshift、splice 方法做了判斷，獲取到插入的值，然後把新新增的值變成乙個響應式物件，並且再呼叫ob.dep.notify() 手動觸發依賴通知，這就很好地解釋了之前的示例中呼叫 vm.items.splice(newlength) 方法可以檢測到變化。

// src/core/observer/array.js

// 獲取陣列的原型array.prototype，上面有我們常用的陣列方法
const arrayproto = array.prototype
// 建立乙個空物件arraymethods，並將arraymethods的原型指向array.prototype
export const arraymethods = object.create(arrayproto)
// 列出需要重寫的陣列方法名
const methodstopatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]// 遍歷上述陣列方法名，依次將上述重寫後的陣列方法新增到arraymethods物件上
methodstopatch.foreach(function (method) 就是重寫後的方法
def(arraymethods, method, function mutator (...args) 
if (inserted) ob.observearray(inserted)
// 將當前陣列的變更通知給其訂閱者
ob.dep.notify()
// 最後返回執行結果result
return result
})})

重寫完陣列的上述7種方法外，我們還需要將這些重寫的方法應用到陣列上，因此在observer建構函式中，可以看到在監聽資料時會判斷資料型別是否為陣列。當為陣列時，如果瀏覽器支援__proto__，則直接將當前資料的原型__proto__指向重寫後的陣列方法物件arraymethods，如果瀏覽器不支援__proto__，則直接將arraymethods上重寫的方法直接定義到當前資料物件上；當資料型別為非陣列時，繼續遞迴執行資料的監聽。

參考：vue中是如何監聽陣列變化？

響應式資料（陣列）檢測變化的注意事項

vue修改陣列中的資料7個方法

var vm newvue script pop 方法用於刪除並返回陣列的最後乙個元素。這裡我直接在瀏覽器控制台演示 push 方法可向陣列的末尾新增乙個或多個元素，並返回新的長度。3.reverse 方法用於顛倒陣列中元素的順序。4.shift 方法用於把陣列的第乙個元素從其中刪除，並返回第乙個元...

ECMAScript 5 中的陣列方法

ecmascript 5定義了9個新的陣列方法來遍歷 對映 過濾 檢測 簡化和搜尋陣列。foreach 方法從頭至尾遍歷陣列，為每個元素呼叫指定的函式。注意，foreach 無法在所有元素都傳遞給呼叫的函式之前終止遍歷。如果要提前終止，必須把foreach 方法放在乙個try塊中，並能丟擲乙個異常。...

ES5中的陣列方法

所有的方法都分兩種 靜態方法 普通方法 靜態方法 建構函式所具備的方法 普通方法 陣列 物件等物件具備的方法 舉例 var arr new array array.這就是乙個靜態方法 arr.這就是普通方法 es5中增加的陣列靜態方法 var obj d var arr 1,2,3,4 functi...