defineProperty和proxy区别

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

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

  data.name = 'Jian'     // set 修改
  console.log(data.name) // Jian get

  data.like = 'apple'        // 不会set 新增 
  console.log(data.like);//apple 不会get
        

2、proxy
获取原始对象的属性不会触发 getter ，只有访问代理对象的属性才能触发 getter。
proxy 可以监听对象新增属性。
有专门针对属性删除的方法 deleteProperty，可以在对象属性被删除时触发

// 原始对象
const data = {
    
    name: 'Jane',
    age: 21,
    hhh:{
    
        xxx:'hxhx'
    }
  }
const proxyData = new Proxy(data, {
    
    get(target, prop) {
    
      console.log('%c 调用get', 'color: red')
      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: orange')
        Reflect.deleteProperty(target, prop)
        return true
      }
   })
   
   console.log(proxyData.name) // Jane
   console.log( data.name) // Jane 不会触发get
   console.log(proxyData.hhh.xxx); //hxhx get
   console.log(data.hhh.xxx); //hxhx 不会触发get


   proxyData.name = 'Jian'  // set 修改
   console.log(proxyData.name) // Jian get
   console.log( data.name) // Jian 不会get

   data.age = '18'       // 不会set 修改
   console.log(data.age);    //18 不会get
   console.log(proxyData.age);//18 get


   data.like = 'apple'        // 不会set 新增
   console.log(data.like); // apple 不会get
   console.log(proxyData.like);//app get

   proxyData.dream = 'sleep' // set 新增
   console.log(data.dream); //sleep 不会get
   console.log(proxyData.dream);//sleep get
   
   delete proxyData.age    // 调用delete 
   
   

参考链接