[TOC] > Vue內部實現了一組觀察數組的變異方法，例如：push()，pop()，shift()等。 > Object.definePropert只能把對象屬性改為getter/setter，而對于數組的方法就無能為力了，其內部巧妙的使用了數組的屬性來實現了數據的雙向綁定，下面我們來一步一步的實現一個簡單版。 # 給定一個數組 調用相關方法時觸發自定義的函數 ## 定義一個需要監聽變化的數組 ``` let obarr = [] ``` ## copy一份數組的原型方法,防止污染原生數組方法 ``` const arrayProto = Array.prototype const arrayMethods = Object.create(arrayProto) ``` ## 把arrayMethods對象上的push轉換為觀察者對象 ``` Object.defineProperty(arrayMethods,'push',{ value:function mutator(){ console.log('obarr.push會走這里') } }) ``` 此時arrayMethods定義了一個push的新屬性，那么我們如何把它和 let obarr = \[\] 綁定起來呢，來看看下面的實現？ ``` obarr.__proto__ = arrayMethods ``` 使用arrayMethods覆蓋obarr的所有方法 <br> 針對于不支持\_\_proto\_\_的瀏覽器實現如下： ``` let obarr = [] const arrayProto = Array.prototype const arrayMethods = Object.create(arrayProto) Object.defineProperty(arrayMethods,'push',{ value:function mutator(){ console.log('obarr.push會走這里') } }) Object.defineProperty(obarr,'push',{ value:arrayMethods.push }) ``` <br> 上面實現了push方法，其他的方法同理，我們只需要把所有需要實現的方法循環遍歷執行即可，升級后代碼如下： ``` const arrayProto = Array.prototype const arrayMethods = Object.create(arrayProto) ;[ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ].forEach(item=>{ Object.defineProperty(arrayMethods,item,{ value:function mutator(){ //緩存原生方法，之后調用 const original = arrayProto[item] let args = Array.from(arguments) original.apply(this,args) }, }) }) function protoAugment (target,src) { target.__proto__ = src } // 調用 let obarr = [] ``` <br> 分析： 1、經過以上的代碼可以看出，只會更改我們給定數組(obarr)的相關方法，而不會污染Array的原生方法，因此其他普通數組不受影響。 2、從新賦值數組的\_\_proto\_\_屬性為arrayMethods，而arrayMethods我們從新定義了push，pop等相關屬性方法，因此當我們使用數組的push,pop等方法時會調用arrayMethods的相關屬性方法，達到監聽數組變化的能力。 3、對于不支持\_\_proto\_\_屬性的瀏覽器，直接使用Object.defineProperty從新定義相關屬性。 4、而Vue的實現方法正如上，更改我們需要監聽的Array數組屬性值（屬性值為函數），在監聽函數里執行數組的原生方法，并通知所有注冊的觀察者進行響應式處理。