简单实现“数据变化更新视图，视图变化更新数据”（MVVM）

1、HTML 

    <div>
      <input type="text" placeholder="请输入内容" />
      <h1></h1>
    </div>

2、JS

​
    <script>
      var inputEle = document.querySelector('input')
      var h1Ele = document.querySelector('h1')

      // 设置默认值
      var obj = {
        msg: '默认值'
      }
      inputEle.value = obj.msg
      h1Ele.innerHTML = obj.msg


      // 实现视图变化数据跟着变化
      inputEle.oninput = function() {
        obj.msg = inputEle.value
      }


      // 直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
      // 实现数据变化视图跟着变化
      let temp = obj.msg
      Object.defineProperty(obj, 'msg', {
        get() {
          // get方法会劫持msg这个属性的获取操作
          return temp
        },
        set(value) {
          // set方法会劫持msg这个属性的设置操作
          temp = value
          h1Ele.innerHTML = temp
          inputEle.value = temp
        },
        enumerable: true,
        configurable: true
      })
    </script>

​