第十篇 手写原理代码 - 简单实现数据双向绑定 - 【 v-model 】

数据的双向绑定是一种设计模式，可以将一个数据模型（Model）和视图组件（View）之间的数据同步自动化。在该设计模式中，当视图层的某个数据发生变化时，它会自动更新数据模型，而当数据模型的某个数据发生变化时，它也会自动更新视图层，从而保持数据和视图之间的同步。
 
在实现数据的双向绑定时，我们通常使用的是一个中介层（ViewModel），这个层负责处理数据模型与视图组件之间的交互。视图层向中介层发送用户操作的请求（例如输入框中的文字变化），中介层将请求传递给数据模型进行处理，然后再将结果返回给视图层进行展示。这个过程中，中介层扮演了一个数据模型和视图组件之间的桥梁。
 
由于双向绑定是自动化的，在使用它时可以有效地减少手动的DOM操作和数据维护，从而提高开发效率。在前端框架中，如Angular、Vue等都提供了双向绑定的支持。
 
双向绑定的原理是通过数据监听来实现的。具体来说，当一个数据模型的属性被更改时，它会触发一个事件或回调函数，然后通知所有依赖于它的视图组件进行更新。而当一个视图组件发生变化时，它会通过绑定指令或事件等机制通知数据模型进行更新。
 
在Vue中，我们可以使用v-model指令来实现双向绑定。例如，我们可以将输入框绑定到数据模型中的属性上，然后当用户在输入框中输入内容时，数据模型就会自动更新。同样的，当数据模型中的属性被更改时，输入框的值也会自动更新。

简单实现数据双向绑定

const definePropertyFn = () => {
  const obj = {};
  let val = null;
 
  Object.defineProperties(obj, {
    val: {
      get() {
        return val;
      },
      set(newV) {
        val = newV;
        document.querySelector("#getContent").innerText = newV;
        console.log("调用了 set , 获取" + newV, val);
      },
    },
  });
 
  return obj;
};

使用

<input id="input" type="text" />
<div id="getContent"></div>
 
let newObj = definePropertyFn();
 
document.querySelector("#getContent").innerText = newObj.val;
document.querySelector("#input").value = newObj.val;
 
function getValue() {
  newObj.val = document.querySelector("#input").value;
}
 
// 监听 input
document
  .querySelector("#input")
  .addEventListener("input", debounce11(getValue, 600));