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