使用 js 实现双向绑定

双向绑定是什么： 是一种常见的前端开发模式，它允许视图和数据模型之间的自动同步。

手动实现双向绑定：通过监听输入框的变化事件和更新数据模型来手动实现双向绑定。

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

// JavaScript
const input = document.getElementById('input');
const model = { text: '' };

inputElement.addEventListener('input', (e) => {    //监听input
  model.text = e.target.value;
});

Object.defineProperty(model, 'text', {
  get() {             // 返回输入框的当前值,确保视图中的值与数据模型保持一致。
    return input.value;   
  },
  set(value) {           //将输入框的值设置为指定的值,确保数据模型中的值更改后，视图中的值也会更新。
    input.value = value;
  },
  
 // 这两个属性是用于控制属性的可枚举性和可配置性的标志，通常设置为`true`。
  enumerable: true,
  configurable: true
});