es6——Proxy

問題的起源

vue3.0 開始 Proxy代替Object.defineProperty，産生了一些列疑惑。

• Proxy是什麼？
• Proxy能幹什麼？
• Vue用Object.defineProperty幹了什麼？
• 為什麼用Proxy代替Object.defineProperty？

解析：

Proxy 可以了解成在目标對象前架設一個“攔截”層，外界對該對象的通路都必須先通過這層攔截，是以提供了一種機制可以對外界的通路進行過濾和改寫。

let obj = new Proxy({}, {
  get (target, p, receiver) {
    console.log('getter')
    return Reflect.get(target, p, receiver)
  },
  set (target, p, value, receiver) {
    console.log('setter')
    return Reflect.set(target, p, value, receiver)
  },
})

在對obj進行讀取和修改操作時，會觸發get或set回調。
obj.count = 1// setter
console.log(obj.count)// getter 1

           

待更新