proxy实现数据双向绑定

Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由你来定义。

 

语法

let p = new Proxy(target, handler);

参数

1. target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
2. handler: 一个对象，其属性是当执行一个操作时定义代理的行为的函数(可以理解为某种触发器)。

需要注意的一个点是，如果是在严格模式下使用proxy，在set方法中需要return true，否则会报错；

下面是数据双向绑定的简单实现 

// html
<input type="text" v-model='content'>
<div v-bind='content'></div>
<hr>
<input type="text" v-model='title'>
<input type="text" v-model='title'>
<div v-bind='title'></div>

// 数据双向绑定
function View() {
  let proxy = new Proxy({}, {
    get() { },
    set(obj, key, value) {
      document.querySelectorAll(`[v-model=${key}]`).forEach(item => {
        item.value = value;
      });
      document.querySelectorAll(`[v-bind=${key}]`).forEach(item => {
        item.innerHTML = value;
      })
　　　 return true
    }
  })

  this.init = () => {
    document.querySelectorAll('[v-model]').forEach(item => {
      item.addEventListener('keyup', function () {
        proxy[this.getAttribute('v-model')] = this.value;
      })
    })
  }
}

new View().init();