defineProperty和proxy区别

不同点

监听方式

下面我们针对一个对象使用不同的方式进行监听，看写法上有什么不同

// 原始对象
const data = {
  name: 'Jane',
  age: 21
}

defineProperty

defineProperty 只能劫持对象的某一个属性，不能对整个对象进行劫持，如果需要监听某一个对象的所有属性，需要遍历对象的所有属性并对其进行劫持来进行监听

Object.keys(data).forEach(key => {
  let oldValue = data[key]
  Object.defineProperty(data, key, {
    get() {
      console.log('%c 调用get', 'color: green') // 这里为了控制台更明显看出调用，使用了不同颜色进行区分
      return oldValue
    },
    set(value) {
      console.log('%c 调用set', 'color: blue')
      oldValue = value
    }
  })
})
console.log(data.name) // Jane
data.name = 'Jian'
console.log(data.name) // Jian
console.log(data)

控制台查看对象属性，也是触发了 setter 的

proxy

const proxyData = new Proxy(data, {
 get(target, prop) {
   console.log('%c 调用get', 'color: green')
   return Reflect.get(target, prop)
 },
 set(target, prop, value) {
   console.log('%c 调用set', 'color: blue')
   return Reflect.set(target, prop, value) // Reflect通过代理对象更改目标对象的属性值
 }
})

console.log('proxyData.name -> ', proxyData.name) // Jane
console.log('data.name -> ', data.name) // Jane
proxyData.name = 'Jian'
console.log('proxyData.name -> ', proxyData.name) // Jian
console.log('data.name -> ', data.name) // Jian 

设置代理对象的属性后，原始对象和代理对象都发生了变化，但是获取原始对象的属性不会触发 getter ，只有访问代理对象的属性才能触发 getter，但是触发了 getter 和 setter 都是去给原始对象获取属性值和设置属性值，因为这里的 target 就是这个原始对象。

区别一：defineProperty 是对属性劫持，proxy 是对对象代理

对象新增属性

根据他们的监听方式的不同我们就知道，当对象新增属性的时候，defineProperty 没有对新增的属性进行劫持，自然就不会监听到对象新增的属性变化，而proxy 是对对象进行代理，自然就能监听到对象属性的新增。

区别二：defineProperty 无法监听对象新增属性，proxy 可以

对象删除属性

proxy 有专门针对属性删除的方法 deleteProperty，可以在对象属性被删除时触发

const proxyData = new Proxy(data, {
  get(target, prop) {
    console.log('%c 调用get', 'color: green')
    return Reflect.get(target, prop)
  },
  set(target, prop, value) {
    console.log('%c 调用set', 'color: blue')
    return Reflect.set(target, prop, value)
  },
  deleteProperty(target, prop) {
    console.log('%c 调用delete', 'color: red')
    Reflect.deleteProperty(target, prop)
    return true
  }
})

delete proxyData.age
console.log(data)

区别三：defineProperty 无法监听对象删除属性，proxy 可以

数组的监听

// 原始数据
const data = ['a', 'b']

如果用defineProperty监听数组

Object.keys(data).forEach(key => {
  let oldValue = data[key]
  Object.defineProperty(data, key, {
    get() {
      console.log('%c 调用get', 'color: green', key)
      return oldValue
    },
    set(value) {
      console.log('%c 调用set', 'color: blue')
      oldValue = value
    }
  })
})

data.push('c') // 不触发
data.length = 3 // 不触发

问题是：数组的 push、pop、shift、unshift、splice、sort，reverse是无法触发 set 方法的
Vue 中能对数组的这些方法监听到是因为 Vue 源码对数组的这些方法进行了重载：

// Vue 中对数组方法的重载
Object.keys(data).forEach(key => {
  let oldValue = data[key]
  Object.defineProperty(data, key, {
    get() {
      console.log('%c 调用get', 'color: green', key)
      return oldValue
    },
    set(value) {
      console.log('%c 调用set', 'color: blue')
      oldValue = value
    }
  })
})

const methods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
methods.forEach(method => {
  let original = Array.prototype[method]
  Object.defineProperty(Array.prototype, method, {
    value() {
      console.log('%c 调用数组方法', 'color: blue', method)
      original.apply(this, arguments)
    }
  })
})

data.push('c')
data.length = 3 // 不触发

proxy 监听方式

const proxyData = new Proxy(data, {
 get(target, prop, receiver) {
   console.log('%c 调用get', 'color: green', prop)
   return Reflect.get(target, prop, receiver)
 },
 set(target, prop, value, receiver) {
   console.log('%c 调用set', 'color: blue', prop)
   return Reflect.set(target, prop, value, receiver)
 },
})

proxyData.push('c') // 触发两次getter两次setter
proxyData.length = 3 // 触发 setter

区别四：defineProperty 监听数组的操作需要重载原型方法，proxy 不需要对数组的方法进行重载。

性能

区别五：proxy 是浏览器支持的原生 API 直接通过浏览器的引擎就可以执行，defineProperty 是循环遍历对象属性的方式来进行监听，自然会比 proxy 对整个对象进行监听的方式要耗性能。

相同点

都不支持嵌套

// 原始数据
const data = {
  name: 'Jane',
  age: 21,
  obj: {
    name: 'Jian'
  }
}

// defineProperty
Object.keys(data).forEach(key => {
  let oldValue = data[key]
  Object.defineProperty(data, key, {
    get() {
      console.log('%c 调用get', 'color: green', key)
      return oldValue
    },
    set(value) {
      console.log('%c 调用set', 'color: blue')
      oldValue = value
    }
  })
})

console.log(data.obj.name)
data.obj.name = 'Jian01'
console.log(data.obj.name)

// proxy
const proxyData = new Proxy(data, {
  get(target, prop) {
    console.log('%c 调用get', 'color: green', prop)
    return Reflect.get(target, prop)
  },
  set(target, prop, value) {
    console.log('%c 调用set', 'color: blue')
    return Reflect.set(target, prop, value)
  },
  deleteProperty(target, prop) {
    console.log('%c 调用delete', 'color: red')
    Reflect.deleteProperty(target, prop)
    return true
  }
})

console.log(proxyData.obj.name)
proxyData.obj.name = 'Jian02'
console.log(proxyData.obj.name)

共同点：都不支持嵌套