上一篇的代碼中，忽略了對數組的處理，只關心了需要關心的部分，假裝數組不存在。
這一篇開始考慮數組的問題。
從最簡單的入手
先考慮一個問題，如何監聽數組中的對象變化？忽略掉數組本身及其中的一般值，只考慮對象數組中的對象。
遍歷數組，而后對數組中的每個對象調用 observe 方法
// 上一篇中出現的未曾重寫的代碼，這一篇中不再重復var Observer = function Observer(value) { this.value = value; this.dep = new Dep(); // 如果是數組，則遍歷所有元素 if(Array.isArray(value)) { this.observeArray(value); } else { this.walk(value); }};Observer.prototype.observeArray = function observeArray(items) { // 遍歷數組所有元素，對單個元素進行 getter、setter 綁定 for (var i = 0, l = items.length; i < l; i++) { observe(items[i]); }};現實的要求
實際實現中當然不會如上例那么簡單，官方文檔中對監聽數組是這樣描述的：
Vue 包含一組觀察數組的突變方法，所以它們也將會觸發視圖更新。這些方法如下：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
由于 JavaScript 的限制， Vue 不能檢測以下變動的數組：
當你直接設置一個項的索引時，例如：vm.items[indexOfItem] = newValue
當你修改數組的長度時，例如：vm.items.length = newLength
所以，要對數組本身的一些方法進行監聽。
經常要用到的一個小函數
def，在整個 Vue 源碼中反復出現，利用Object.defineProperty() 在 obj 上定義屬性 key（也又可能是修改已存在屬性 key）：
function def(obj, key, val, enumerable) { Object.defineProperty(obj, key, { value: val, // 轉變為 boole 值，如果不傳參，轉為 false enumerable: !!enumerable, writable: true, configurable: true });}給對象添加一組方法
給對象添加一組方法，如果所在環境支持 proto，就簡單了，直接把對象的 proto 指向這一組方法就好了；如果不支持，則遍歷這一組方法，依次添加到對象中，作為隱藏屬性（即 enumerable: false，不能被 in 關鍵字找到）:
var hasProto = '__proto__' in {};var augment = hasProto ? protoAugment : copyAugment;function protoAugment(target, src) { target.__proto__ = src;}function copyAugment(target, src, keys) { for(var i = 0; i < keys.length; i++) { var key = keys[i]; def(target, key, src[key]); }}先來一發簡單的
var arrayPush = {};(function(method){ var original = Array.prototype[method]; arrayPush[method] = function() { // this 指向可通過下面的測試看出 console.log(this); return original.apply(this, arguments) };})('push');var testPush = [];testPush.__proto__ = arrayPush;// 通過輸出，可以看出上面所述 this 指向的是 testPush// []testPush.push(1);// [1]testPush.push(2);
偽改寫數組原型來監聽數組的變化
如官方文檔所言，所需監視的只有 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 7 種方法，這 7 種方法有可分為兩類：
1、push()、unshift()、splice() 這三種可能會給數組添加新元素的方法；
2、其余的不會新增元素的方法。
為了避免污染全局的 Array，新建一個以 Array.prototype 為原型的對象，而后在這個對象本身附加屬性，再把這個新建的對象作為原型或者作為屬性添加到 Observer 的 value 中，來達到監視其變化的目的。
var arrayProto = Array.prototype;var arrayMethods = Object.create(arrayProto);
接著就是遍歷需要觸發更新的幾個方法，依次將其附加到 arrayMethods 上：
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(function(method) { // 獲取原始的數組操作方法 var original = arrayProto[method]; // 在 arrayMethods 上新建屬性 method，并為 method 指定值（函數） // 即改寫 arrayMethods 上的同名數組方法 def(arrayMethods, method, function mutator() { var arguments$1 = arguments; var i = arguments.length; var args = new Array(i); // 將偽數組 arguments 轉變為數組形式 // 為何不用 [].slice.call(arguments)？ while(i--) { args[i] = arguments$1[i]; } var result = original.apply(this, args); // 因 arrayMethods 是為了作為 Observer 中的 value 的原型或者直接作為屬性，所以此處的 this 一般就是指向 Observer 中的 value // 當然，還需要修改 Observer，使得其中的 value 有一個指向 Observer 自身的屬性，__ob__，以此將兩者關聯起來 var ob = this.__ob__; // 存放新增的數組元素 var inserted; // 對幾個可能有新增元素的方法單獨考慮 switch(method) { case 'push': inserted = args; break; case 'unshift': inserted = args; break; case 'splice': // splice 方法第三個參數開始才是新增的元素 inserted =args.slice(2); break; } if(inserted) { // 對新增元素進行 getter、setter 綁定 ob.observerArray(inserted); } // 觸發方法 ob.dep.notify(); return result; });};var arrayKeys = Object.getOwnPropertyNames(arrayMethods);更新 Observer
根據上例代碼中的注釋，改寫 Observer，使得兩者關聯起來，達到監聽數組變化的目的：
var Observer = function Observer(value) { this.value = value; this.dep = new Dep(); def(value, '__ob__', this); // 如果是數組，則遍歷所有元素 if(Array.isArray(value)) { var argument = hasProto ? protoAugment : copyAugment; argument(value, arrayMethods, arrayKeys); this.observeArray(value); } else { this.walk(value); }};參考資料：
vue早期源碼學習系列之二：如何監聽一個數組的變化
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
