v-model原理

    <h2>v-model原理</h2>
    <input type="text" placeholder="请输入用户名" name="" id="username" />
    <div>
      显示值：
      <p id="uName"></p>
    </div>
    <script>
      // 模拟 Vue 中的 data
      let obj = {};
      Object.defineProperty(obj, "username", {
        // 取值
        get: function () {
          console.log("取值");
        },
        set: function (val) {
          console.log("设置值");
          document.getElementById("uName").innerHTML = val;
        },
      });
      document
        .getElementById("username")
        .addEventListener("keyup", function (ev) {
          obj.username = ev.target.value;
        });
    </script>

Object.defineProperty(obj, prop, descriptor)

参数：

obj

要定义属性的对象。

prop

要定义或修改的属性的名称或 Symbol 。

descriptor

要定义或修改的属性描述符。

get

属性的 getter 函数，如果没有 getter，则为 undefined，当访问该属性时，会调用此函数

set

属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。

v-model：当数据发生变化时，视图层会进行更新，当视图层更新数据时，数据层会进行更新

声明obj对象模拟vue中的data，

当调用obj里面的属性时调用Object.defineProperty中的get方法 

当修改obj里面的属性时调用Object.defineProperty中的set方法来更改页面的显示