模拟vue的双向绑定

最新推荐文章于 2023-08-29 11:39:35 发布

坚持原创

最新推荐文章于 2023-08-29 11:39:35 发布

阅读量193

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/sky1679/article/details/100303679

版权

vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

首先说一下我自己的理解，
以v-model为例，输入框里输入的值会同步到data中，而如果修改data的值，输入框的中的内容也会发生变化。
若将输入框作为视图层，data作为逻辑层
视图层到逻辑层：可以用oninput事件来模拟，
逻辑层到视图层：通过defineProperty来对setter进行修改，当监听到对象属性发生变化的时候，做出相应的操作（这里是修改input框的内容）

<!DOCTYPE html>
<head>
  <title>模拟vue的双向绑定</title>
</head>
<body>
  <input id="txt" name="txt" type="text" />
  <script>
    const input = document.getElementById('txt');
    var data = {
      value: undefined
    };
    input.addEventListener('input', function(e) {
      data.value = e.target.value;
    });
    (function() {
      let value;
      Object.defineProperty(data, 'value', {
        set: function(newValue) {
          console.log('set');
          input.value = newValue;
          value = newValue;
          console.log(value);
        },
        get: function() {
          console.log('get');
          return value;
        }
      });
    })();
    

  </script>
</body>