Proxy模拟Vue双向数据绑定

Vue原理

---

众所周知

• Vue的模式是m-v-vm模式，即（model-view-modelView），通过modelView作为中间层（即vm的实例），进行双向数据的绑定与变化。
• 而实现这种双向绑定的关键就在于：Object.defineProperty和订阅——发布者模式这两点。

---

下面我们通过Proxy对象的方式来模拟双向数据绑定

这个例子中的原理: 通过代理对象的set访问器.当表单的发生变化时,会往对象中添加值,从而触发set访问器函数
通过set属性访问器将获取来的数据再添加到需要修改的dom元素中.

---

html代码

 <!-- 下面的 两个表单任意一的一项值发生改变 其他的都会变化 -->
  <input type="text" v-model="title">
  <input type="text" v-model="title">

  <!-- p标签绑定名为title,这里面的数据随着model值为title的数值变化而变化 -->
  <p v-bind="title">这里发生更新</p>

Javascript代码

  function View() {

      // 设置代理的对象,可以将改对象理解为数据的容器
      let proxy = new Proxy({}, {

        // 当通过下面的 init方法后,会触发set访问器,使用代理的目的就是模拟vue的Watcher,2个表单中任意一个数据发生修改时,就会触发set函数.
        set(target, property, value) {
          console.log(value);
          document.querySelectorAll(`[v-model="${property}"]`).forEach(ele => {
            ele.value = value
          })
          document.querySelectorAll(`[v-bind="${property}"]`).forEach(ele => {
            ele.innerText = value 
          })

        }
      })
      // init方法
      this.init = function () {
        let els = document.querySelectorAll("[v-model]")
        els.forEach(ele => {
          ele.addEventListener("keyup", function () {
            proxy[this.getAttribute("v-model")] = this.value
          })
        })
      }
    }
    new View().init()

---

效果如下:

博客园
掘金

---