vue双向绑定原理模拟实现(proxy)

in JavaScript with 0 comment

Vue中v-model实现的双向绑定原理,现在用es6的proxy模拟一下

"use strict";
    //vue代理拦截, 双向绑定,这里使用代理,是方便使用对象的set/get方法,不然自己要定义一个对象,并写上get/set方法
    function View() {
      let proxy = new Proxy(
        {},
        {
          get(obj, property) {
            return obj[property];
          },
          set(obj, property, val) {
            document
              .querySelectorAll(`[v-model="${property}"]`)
              .forEach((el) => {
                el.value = val;
              });
            document
              .querySelectorAll(`[v-bind="${property}"]`)
              .forEach((el) => {
                el.innerHTML = val;
              });
            return true;
          }
        }
      );

      this.init = function () {
        let inputs = document.querySelectorAll("[v-model]");
        inputs.forEach((el) => {
          el.addEventListener("keyup", function () {
            proxy[this.getAttribute("v-model")] = this.value;
          });
        });
      };
    }
    new View().init();
评论已关闭.