js——纯js模拟双向数据绑定

js——纯js模拟双向数据绑定

是不是很多人只是知道双向数据绑定的实现效果，并不知道其原理，或是知道其原理并不明白的，
使用js模拟一个简单的双向数据绑定案例吧，就会变得容易理解

Object.defineProperty()

vue双向数据绑定的原理就是它了

Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。
方法参数：

Object.defineProperty(obj, prop, descriptor)

html：

<div class='box'>
  // input输入框最能体现双向数据绑定的效果了
  <input type='text' id='text' />
  // 输入内容会同步显示在这里
  <p id='showText'></p>
</div>

js：

var obj = {}
var write = document.getElementById('text')
var read = document.getElementById('showText')

// 参数obj指定修改的对象，参数'text'是添加或修改该对象text属性
Object.defineProperty(obj, 'text', {
// get 获取   重要
  get: function () {
    return obj
  },
 // set 修改    重要
 // 当属性发生改变时，将obj.text属性复制给同步显示的read元素节点
  set: function (val) {
    read.innerHTML = val
  }
})
// 监听input输入事件，keyup键盘事件中将Object.defineProperty中get到的obj数据赋值
write.addEventListener('keyup', function (e) {
  obj.text = e.target.value
})

监听input输入事件，keyup键盘事件中将Object.defineProperty中get到的obj数据赋值，形成最终双向数据绑定的效果