# ❓ Vue 的响应式原理中 Object.defineProperty 有什么缺陷？

为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？

# Object.defineProperty 缺陷

监听不到数组响应，vue2.+重写了数组原型方法
```
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
```
1
2
3
4
5
6
7

Object.defineProperty 劫持的是某个对象的具体的某条属性

const proxyObject = {
  name: 'Jeff9511',
}

Object.defineProperty(proxyObject, 'name', {
  get() {
    return this.text
  },
  set() {
    this.text = '我被劫持了'
  },
  configurable: true,
  enumerable: true,
})
proxyObject.name = 'Jeff0001'
console.log(proxyObject.name)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果需要劫持整个对象，就需要深度遍历劫持

# Proxy

支持数组劫持

支持直接对整个对象劫持

var obj = new Proxy(
  {},
  {
    get: function (target, propKey, receiver) {
      console.log(`getting ${propKey}!`)
      return Reflect.get(target, propKey, receiver)
    },
    set: function (target, propKey, value, receiver) {
      console.log(`setting ${propKey}!`)
      return Reflect.set(target, propKey, value, receiver)
    },
  }
)

obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Proxy 支持 13 种拦截操作

# 参考

https://es6.ruanyifeng.com/#docs/proxy