数据与视图的绑定与同步，最终体现在对数据的读写处理过程中，也就是 Object.defineProperty() 定义的数据 set、get 函数中。Vue 中对于的函数为 defineReactive，在精简版实现中，我只保留了一些基本特性：
function defineReactive(obj, key, value){
var dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactGetter(){
if(Dep.target){
dep.depend();
}
return value;
},
set: function reactSetter(newVal){
if (value === newVal) {
return;
} else {
value = newVal;
//如果数据发生改变，则通知所有的 watcher（借助 dep.notify()）
dep.notify();
}
}
})
}
在对数据进行读取时，如果当前有 Watcher（对数据的观察者，watcher 会负责将获取的新数据发送给视图），那将该 Watcher 绑定到当前的数据上（dep.depend()，dep 关联当前数据和所有的 watcher 的依赖关系），是一个检查并记录依赖的过程。而在对数据进行赋值时，如果数据发生改变，则通知所有的 watcher（借助 dep.notify()）。这样，即便是我们手动改变了数据，框架也能够自动将数据同步到视图。
数据绑定关系的识别过程
Vue 和 AngularJS 中，都是通过在 HTML 中添加指令的方式，将视图元素与数据的绑定关系进行声明
<form id="test">
<input type="text" v-model="name">
</form>
以上的 HTML 代码表示该 input 元素与 name 数据进行绑定。在 JS 代码中可以这样进行初始化：
var vm = new Vue({
el: '#test',
data: {
name: 'sysuzhyupeng'
}
})
代码正确执行后，页面上 input 元素对应的位置会显示上面代码中给出的初始值：sysuzhyupeng。
执行 vm.name = ‘zhyupeng' 后，页面上 input 也会更新为显示： zhyupeng。在页面文本框中修改内容为：yupeng，则通过vm.name 获取的值为：'yupeng'
React数据绑定
React采用这种方式，考虑虚拟DOM树的更新：
- 属性更新，组件自己处理
- 结构更新，重新“渲染”子树（虚拟DOM），找出最小改动步骤，打包DOM操作，给真实DOM树打补丁
单纯从数据绑定来看，React虚拟DOM没有数据绑定，因为setState()不维护上一个状态（状态丢弃），谈不上绑定
从数据更新机制来看，React类似于提供数据模型的方式（必须通过state更新）
没有双向数据绑定的话，input的双向场景要怎么实现？通过框架提供的API，手动通知数据变化，和操作DOM的方式很像