实现简化版vue数据双向绑定

vue如何实现数据双向绑定是许多人喜欢问的，你不得不去尝试实现它。 我最开始的设想是通过for循环遍历实现，后来查查资料，发现有难的有简单的 这是简单版本的：

<div id="app">
  <input type="text" id="search" />
  <span id="content"></span>
</div>

下面是js部分

var obj = {}; //定义一个空对象

var val = "  "; //赋予初始值

Object.defineProperty(obj, "val", {
  //定义要修改对象的属性

  get: function () {
    return val;
  },

  set: function (newVal) {
    val = newVal; //定义val等于修改后的内容

    document.getElementById("search").value = val; //让文本框的内容等于val

    document.getElementById("content").innerHTML = val; //让span的内容等于val
  },
});
document.addEventListener("keyup", function (e) {
  //当在文本框输入内容时让对象里你定义的val等于文本框的值

  obj.val = e.target.value;
});