实现非常简单的js双向数据绑定

实现简单的双向数据绑定，主要需要掌握以下两个知识点：

1. 如何监听输入框的变化事件并更新数据模型
2. 如何监听数据模型的变化并更新对应的HTML元素

下面我们分别介绍这两个知识点的实现方法，以及两个示例说明。

监听输入框变化事件

在HTML中，输入框的值可以通过value属性获取到。我们可以使用EventTarget.addEventListener()方法来监听输入框的变化事件，从而更新对应的数据模型。

示例1：监听input输入框变化事件

<input type="text" id="input">

<script>
  let input = document.querySelector('#input');
  let data = {value: ''};

  input.addEventListener('input', function(event) {
    data.value = event.target.value;
  });
</script>

在上面的示例中，我们先获取到输入框元素input，然后定义一个数据模型data，包含一个value属性，初始值为空字符串。接着，我们使用addEventListener()方法监听input元素的input事件，当输入框内容发生变化时，触发回调函数中的代码，将输入框的值更新到数据模型中。

监听数据模型变化并更新HTML元素

在JavaScript中，我们可以使用Object.defineProperty()方法来为对象属性添加getter和setter方法，从而实现对数据模型变化的监听。每当数据模型的属性值发生变化时，就会触发setter方法并执行相应的更新操作，从而保证HTML元素始终同步更新。

示例2：监听数据模型变化并更新DOM元素

<div id="app">
  <span id="value"></span>
</div>

<script>
  let data = {value: ''};

  let valueEle = document.querySelector('#value');
  Object.defineProperty(data, 'value', {
    get: function() {
      return this._value;
    },
    set: function(newValue) {
      this._value = newValue;
      valueEle.innerText = newValue;
    }
  });

  // 修改数据模型
  data.value = 'hello world';
</script>

在上面的示例中，我们定义了一个数据模型data，包含一个value属性。然后，通过Object.defineProperty()方法为data对象的value属性添加了一个getter方法和一个setter方法。在setter方法中，我们更新了HTML元素的innerText属性，从而实现了数据模型变化时的DOM元素更新。

同时，我们在代码的末尾手动修改数据模型的值，能够看到页面中的span元素也随之更新了。

综上所述，通过上述两个示例，我们可以看到如何通过监听输入框变化事件和监听数据模型变化方法，实现简单的双向数据绑定。