对比Object.defineProperty()和proxy对数组监听的处理

对比Object.defineProperty()和proxy对数组监听的处理

Object.defineProperty()方法用于给对象添加属性，无法直接给数组添加或删除元素，可以通过为对象添加一个数组类型的属性，如下：

let obj = {}
Object.defineProperty(obj, 'a', {
  configurable: true,
  enumerable: true,
  get: () => {
    console.log('get value by defineProperty')
    return val
  },
  set: (newVal) => {
    console.log('set value by defineProperty')
    val = newVal
  }
})

obj.a = [] // set value by defineProperty
obj.a.push('1') // get value by defineProperty
obj.a[0] = 1 // get value by defineProperty
obj.a.pop(1) // get value by defineProperty
obj.a = [1, 2, 3] // set value by defineProperty

从上面例子中可以看出，使用Object.defineProperty()为对象添加数组类型属性后，当使用数组自身的一些方法如push、pop等为数组添加或删除元素时，不能触发属性a的setter，无法实现对属性a中元素的实时监听，这也就是Vue中重写数组方法的原因。

值得注意的是上面使用push、pop、直接通过索引为数组添加元素时会触发属性a的getter，是因为与这些操作的返回值有关，以push方法为例，使用push方法为数组添加元素时，push方法返回值是添加之后数组的新长度，当访问数组新长度时就会自然而然触发属性a的getter。

proxy可以直接代理数组，我们可以直接对数组进行处理，如下：

let arr = []
let arrProxy = new Proxy(arr, {
  get: (target, prop) => {
    console.log('get value by proxy')
    return prop in target ? target[prop] : undefined
  },
  set: (target, prop, value) => {
    console.log('set value by proxy')
    target[prop] = value
    return true
  }
})

arrProxy.push(1)
// get value by proxy  // 获取数组arr的push方法
// get value by proxy  // 获取数组arr的length属性
// set value by proxy  // 设置arr[0] = 1
// set value by proxy  // 设置数组arr长度为1

arrProxy[0] = 1
// set value by proxy

arrProxy[0] = 2
// set value by proxy

从上面例子中可以看出当使用proxy代理数组时，调用数组的push方法可以触发一系列操作，具体如下：触发数组的getter，获取数组arr的push方法；触发数组的getter，获取arr的length属性；触发数组的setter，设置arr[0] = 1；触发数组的setter，设置数组arr的长度为1；直接使用索引值进行添加改变元素时也会触发数组arr的setter。

通过对比Object.defineProperty()和proxy对数组监听的处理，可以发现proxy不但可以直接监听数组，而且代理数组后可以监听到数组常用的方法对数组产生的改变，比Object.defineProperty()更方便更强大，这也是Vue 3.0使用proxy进行数据监听的原因。