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

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();

本文由 dealdot ＜dealdot＃163.com＞ 创作, Full Stack Developer @ DeepBlue
本文最后编辑时间为: Aug 23, 2021 at 11:38 am
转载请注明来源