原生js简单实现双向数据绑定原理

根据对象的访问器属性去监听对象属性的变化，访问器属性不能直接在对象中设置，而必须通过 defineProperty() 方法单独定义。 访问器属性的"值"比较特殊，读取或设置访问器属性的值，实际上是调用其内部特性：get和set函数。

下面通过一个实例解释下双向数据的过程：



通过创建一个obj对象，然后设置一个访问器属性hello，然后监听文本框的一个keyup事件，调用回调函数，重新设置obj.hello属性，其实际上是去调用内部属性set方法，在set方法更改文本框的value和p标签的innerHTML,从而达到数据的绑定。get 和 set 方法内部的 this 都指向 obj，这意味着 get 和 set 函数可以操作对象内部的值。另外，访问器属性的会"覆盖"同名的普通属性，因为访问器属性会被优先访问，与其同名的普通属性则会被忽略。