es6中的 Proxy

    //let p = new Proxy(target, handler)
    //target 代表需要添加代理的对象，handler 用来自定义对象中的操作，比如可以用来自定义 set 或者 get 函数
    //new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为
    
    var proxy = new Proxy({},{
        //配置对象有一个get方法，用来拦截对目标对象属性的访问请求。
        //get方法的两个参数分别是目标对象和所要访问的属性。可以看到，由于拦截函数总是返回35，所以访问任何属性都得到35。
        get: function(target,property){
            return 35
        }
    })
    //console.log(proxy.name) //35
    //console.log(proxy.time)  //35
    
    //get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），
    //其中最后一个参数可选。
    var person = {
        name: "张三"
      };
      
      var proxy2 = new Proxy(person, {
        get: function(target, property) {
          if (property in target) {
            return target[property];
          } else {
            throw new ReferenceError("Property \"" + property + "\" does not exist.");
          }
        }
      });
      proxy2.name // "张三"
      proxy2.age // 抛出一个错误
    
    //   set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。
    //   假定Person对象有一个age属性，该属性应该是一个不大于 200 的整数，那么可以使用Proxy保证age的属性值符合要求。
    let validator = {
        set: function(obj, prop, value) {
          if (prop === 'age') {
            if (!Number.isInteger(value)) {
              throw new TypeError('The age is not an integer');
            }
            if (value > 200) {
              throw new RangeError('The age seems invalid');
            }
          }
      
          // 对于满足条件的 age 属性以及其他属性，直接保存
          obj[prop] = value;
        }
      };
      
      let person2 = new Proxy({}, validator);
      
      person2.age = 100;
      
      person2.age // 100
      person2.age = 'young' // 报错
      person2.age = 300 // 报错
    
    
    // apply方法拦截函数的调用、call和apply操作。
    
    // apply方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。
     var twice = {
        apply (target, ctx, args) {
          return Reflect.apply(...arguments) * 2;
        }
      };
      function sum (left, right) {
        return left + right;
      };
      var proxy = new Proxy(sum, twice);
      proxy(1, 2) // 6
      proxy.call(null, 5, 6) // 22
      proxy.apply(null, [7, 8]) // 30
    
    
      //ownKeys方法用来拦截对象自身属性的读取操作
      //ownKeys方法用来拦截对象自身属性的读取操作。具体来说，拦截以下操作。
    Object.getOwnPropertyNames()
    Object.getOwnPropertySymbols()
    Object.keys()
    for...in循环
    
     let target = {
      a: 1,
      b: 2,
      c: 3
    };
    
    let handler = {
      ownKeys(target) {
        return ['a'];
      }
    };
    
    let proxy = new Proxy(target, handler);
    
    Object.keys(proxy)

vue3.0Proxy 来替换原本的 Object.defineProperty 来实现数据响应式

let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver)
    },
    set(target, property, value, receiver) {
      setBind(value, property)
      return Reflect.set(target, property, value)
    }
  }
  return new Proxy(obj, handler)
}

let obj = { a: 1 }
let p = onWatch(
  obj,
  (v, property) => {
    console.log(`监听到属性${property}改变为${v}`)
  },
  (target, property) => {
    console.log(`'${property}' = ${target[property]}`)
  }
)
p.a = 2 // 监听到属性a改变
p.a // 'a' = 2

在上述代码中，我们通过自定义 set 和 get 函数的方式，在原本的逻辑中插入了我们的函数逻辑，实现了在对对象任何属性进行读写时发出通知。

当然这是简单版的响应式实现，如果需要实现一个 Vue 中的响应式，需要我们在 get 中收集依赖，在 set 派发更新，之所以 Vue3.0 要使用 Proxy 替换原本的 API 原因在于 Proxy 无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的实现有一些数据更新不能监听到，但是 Proxy 可以完美监听到任何方式的数据改变，唯一缺陷可能就是浏览器的兼容性不好了。