vue用Object.defineProperty手写一个简单的双向绑定的示例

本文链接：https://blog.csdn.net/kassiaaaa/article/details/117807632

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>双向绑定</title>
</head>
<body>
  手写一个简单双向绑定<br/>
  <input type="text" id="model"><br/>
  <div id="modelText"></div>
</body>
<script>
  var model = document.querySelector("#model");
  var modelText = document.querySelector("#modelText");
  var defaultName = "defaultName";
  var userInfo = {}
  model.value = defaultName;
  modelText .textContent=defaultName;
  Object.defineProperty(userInfo, "name", {
    get: function () {
      console.log("你来拿值啦！");
      return defaultName; // //这里不能直接用userInfo.name，执行.又会进入defineProperty
    },
    set: function (value) {
      defaultName = value;
      model.value = value;  //值改变的时候触发数据更新
      console.log("你来修改值啦！");
      console.log(value);
      modelText.textContent = value;
    }
  })
 
  userInfo.name = "new value";
  var isEnd = true;
 
  model.addEventListener("keyup", function () {
    if (isEnd) {
      userInfo.name = this.value;
    }
  }, false)
  //加入监听中文输入事件
  model.addEventListener("compositionstart", function () {
    console.log("开始输入中文啦");
    isEnd = false;
  })
  model.addEventListener("compositionend", function () {
    isEnd = true;
    console.log("结束输入中文啦");
  })
</script>
</html>