上一篇的代碼中，忽略了對數組的處理，只關心了需要關心的部分，假裝數組不存在。

這一篇開始考慮數組的問題。

從最簡單的入手

先考慮一個問題，如何監聽數組中的對象變化？忽略掉數組本身及其中的一般值，只考慮對象數組中的對象。

遍歷數組，而后對數組中的每個對象調用 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');