Proxy可以实现哪些功能？它和Object.defineProperty的区别是什么？

Proxy可以实现哪些功能？它和Object.defineProperty的区别是什么？

Vue3.0 中将会通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。 Proxy 是 ES6 中新增的功能，它可以用来自定义对象中的操作。

Proxy

let p = new Proxy(target, handler)

target 代表需要添加代理的对象，handler 用来自定义对象中的操作，比如可以用来自定义 set 或者 get 函数。

接下来我们通过 Proxy 来实现一个数据响应式

    let user = { name:'Jimmy' }

    function makeProxy(target){
      return new Proxy(target,{
        get:(target,key) => {
          console.log('这里获取了这个数据，上报！');
          return target[key]
        },
        set:(target,key,value)=>{                   //target-目标函数 //key-name //value-6
          if(typeof value !== 'string'){
            console.log('类型错误');
            return;
          }
          target[key] = value;
        }
      })}

      let proxy = makeProxy(user);      
      console.log(proxy);                         //Proxy{name:'Jimmy'}
      console.log(proxy.name); 										//这里获取了数据，Jimmy

      proxy.name = 6                              //类型错误，因为更改了类型所以进入了set中

对于函数这样的高级公民我们也可以通过proxy来拦截并增加自己所需操作；

例如：之前为了想要计算出函数的性能，一般需要在函数里面加入定时器，这是非常危险的操作；而使用proxy可以在外面对其的性能进行测试；

function isPrime(number){
      if(number <2) return false
      for(let i =2;i<number;i++){
        if(number %2 === 0) return false
      }
      return true
    }

    // 使用proxy来检测函数运行时间
    let isPrimieProxy = new Proxy(isPrime,{
      apply:(target,thisArg,args)=>{                //这里传个apply代表它被调用
        console.time('isPrime');
        const result = target.apply(thisArg,args);
        console.timeEnd('isPrime')
        return result;
      }
    })

    isPrimieProxy(1234567)                          //-> 2.3ms

defineproperty和proxy的对比

区别1：defineproperty只能监听某个属性不能全对象监听，proxy不用设置具体属性

区别2：proxy不需要借助外部的value，也有单独相配的对象即Reflect，get里面有target,key,reciver三个值

区别3：不会去污染原对象,proxy会返回一个新的代理对象，不会对原来的target进行改动