双向绑定之最简单的demo

从上一篇中，我们理解了数据监听的原理，接下来我们来实现一个最简单的demo
本demo中，通过定义数据对象的get set，实现M绑定到V，通过绑定dom的input，实现V绑定到M
M—>V

  "use strict"
  var obj = {}
  var txtTest = document.querySelector('input')
  var divTest = document.querySelector('div')
  Object.defineProperty(obj, 'key1', {
    set: (newValue) => {
        divTest.innerHTML = newValue
        txtTest.value = newValue
        return newValue
    },
    get: () => {

    }
  })

上面的代码中，定义了一个obj，使用defineProperty对键值key1进行了数据劫持，当set值时，对dom进行赋值

V——>M
通过注册input的input事件，我们来监听input的值变化时，把当前的input值赋给obj.key1，从而触发obj.key1的set

  txtTest.addEventListener('input',()=>{
    obj.key1 = txtTest.value
  })

这就是最简单的双向绑定的demo了