什么是双向绑定

双向绑定即在用户交互中视图层与数据模块层的自动映射，在html中，试图层的dom元素(如input)要实现实时的数据同步，要做一下事情

• input中绑定原生事件，回调更新数据层 (1)
• 当数据层变化时，更新input或关联元素的value (2)

而在js的层面上，这是十分繁琐的。于是我希望通过一系列的方法去绕过这个过程，另外，这也是jQuery与Vue、React这些js框架的最大不同之处。

恭喜你!!你完成了从事件驱动到数据驱动的思维转变

请思考以下过程:

DOM   --(指令)--> 数据层
数据层 --(数据劫持)--> DOM

指令

所谓指令，是利用html属性，通过编译(Compile)对dom元素进行事件的绑定，vue.js对根节点进行迭代编译。从而实现(1)这个过程

数据劫持

完成指令这个操作后，是不是已经可以实现通过指令更新数据层，那就剩下(2)没有实现，我可以对数据层面的数据进行劫持，在数据变化的时候，更新视图。那你想怎么进行数据劫持了，对于普通的属性可以使用Object.definedProperty()这个方法，对于数组呢?

简单的双向绑定

<input id="root"></input>
<p id="target"></p>
const root = document.getElementById('root'),
target = document.getElementById('target'),
model = {
  text : ''
}
// 实现1
root.addEventListener('keyup',function(e) { 
  model.text = e.target.value
})

// 实现2 
Object.definedProperty(model,'text',{
  configuable : false ,
  enumable : true,
  set : function(val) { 
    root.val = val
    target.innerHTML = val  // 此处的set会不会多次触发?
  },
  get : function() { 
    return model.text 
  }
})