es6 Proxy

proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和定义
语法：

const p = new Proxy(targer, handler)

target:要使用Proxy包装的目标对象
handlder:一个通常以函数作为属性的对象

例子

proxyFun() {
        let obj = {
          a: 1
        }
        let proxyObj = new Proxy(obj,{
          get: function (target,prop) {
            return prop in target ? target[prop] : 0
          },
          set: function (target,prop,value) {
            target[prop] = 111
          } 
        })
        console.log('11111111',proxyObj.a)   //1
        console.log('111111112',proxyObj.b)  //0
        obj.a = 222
        console.log('111111113',proxyObj.a)  //222
      }

上述例子中，我们事先定义了一个对象 obj , 通过 Proxy 构造器生成了一个 proxyObj 对象，并对其的 set(写入) 和 get (读取) 行为重新做了修改。
当访问对象内原本存在的属性时，会返回原有对应值，当访问不存在的属性时，会返回0，当试图设置属性的值时，总会返回222

API

ES6 中 Proxy 目前提供了 13 种可代理操作
get()
该方法用于拦截某个属性的读取操作，接受三个参数，依次为目标对象、属性名和proxy示例本身
set()
该方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象，属性名、属性值和proxy实例本身
apply()
该方法拦截函数调用、call和apply操作
…

数据绑定

proxy实现简单数据双向绑定
页面结构：

逻辑：

proxyFun() {
        let a = document.getElementById('a')
        let input = document.getElementById('input')
        let data = {
          text: 'hello world'
        }
        let handler = {
          set: function (target,prop,value) {
            if(prop === 'text') {
              //更新值
              target[prop] = value
              //更新视图
              a.innerHTML = value
              input.value = value
              return true
            }else{
              return false
            }
          }
        }
        //构造proxy对象
        let myText = new Proxy(data,handler)
        myText.text = data.text
        //添加input监听事件
        input.addEventListener('input',function(e) {
          myText.text = e.target.value
        })
      }

通过Proxy创建了myText实例，通过拦截myText中text属性的set方法，实现了视图更新。这只是简单版的双向绑定，要实现vue的双向绑定，需要在get中收集依赖，在set中派发更新。vue3.0使用proxy代替原本api就在于proxy无需一层层递归为每个属性添加代理，一次即可完成所有操作，性能上更好，并且原本一些数据更新不能监听到的，proxy可以完美解决，唯一缺陷就是浏览器的兼容性不好。