手写vue model响应式原理(个人理解)

54 阅读1分钟
``` <input type="text" placeholder="请输入当前值" id="username" />
    显示值:
    <p id="jaesaname"></p>
    <script>
      let jaesa = {};
      //使用Object.defineProperty 实现MVVM对DOM页面获取的输入值进行双向绑定
      Object.defineProperty(jaesa, "username", {
        //获取值输入值
        get: function () {
          console.log("取值");
        },
        //
        set: function (val) {
          // console.log("设置值");
          //将全局winwods获取的页面的val值赋值给侦探到的显示框中
          document.getElementById("jaesaname").innerText = val;
          // console.log(val);
        },
      });
      //监听输入框中的数据,并把数据绑定到“显示值”中,显示出来,实现数据双向绑定的效果
      document
        .getElementById("username")
        .addEventListener("keyup", function () {
          console.log(event);
          jaesa.username = event.target.value;
        });
    </script>