Object.defineProperty和Proxy

Object.defineProperty問題

Object.defineProperty() 沒法監控到數組下標的變化。vue只能經過如下幾種方法來監聽

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

以上幾種方法也是通過vue內部處理後才能監聽的。

只能劫持對象的屬性,所以咱們須要對每一個對象的每一個屬性進行遍歷，若是屬性值也是對象那麼須要深度遍歷,顯然能劫持一個完整的對象是更好的選擇。

Proxy

代理:對外暴露代理對象,操做的時候，表面上操做的是代理對象(proxy)，實際上改變的是目標對象 (target)，從而能夠在操做代理對象的時候進行一些處理(handler)後，再傳遞到目標對象。

特色：

• 能夠劫持整個對象，並返回一個新對象
• 有13種劫持操做
• Proxy是es6提供的，兼容性很差,沒法用polyfill磨平

Proxy使用：

es6提供proxy構造函數，第一個參數target:是所要代理的目標對象，能夠是空對象。第二個handler是攔截器，一個攔截器能夠有多個攔截操做

var proxy = new Proxy(target, handler);

全部的對target的操做都落在proxy上了。

攔截操做一共有13個

• get

get(target, propKey, receiver)：攔截對象屬性的讀取 能夠繼承

• set

set(target, propKey, value, receiver)：攔截對象屬性的設置，好比proxy.foo = v或proxy['foo'] = v，返回一個布爾值。

更多攔截器信息>>

Reflect

反射：經過類的類類型來操做類的屬性。包含來對象語言內部的方法，一共有13種，和proxy一一對應，若是在Proxy中調用Reflect的話，其實對應的就是默認行爲。

Proxy的this指向

雖然 Proxy 能夠代理針對目標對象的訪問， 但它不是目標對象的透明代理，即不作任何攔截的狀況下，也沒法保證與目標對象的行爲一致。主要緣由就是在 Proxy 代理的狀況下，目標對象內部的this關鍵字會指向 Proxy 代理。