在数据绑定上来说，vue的特色是双向数据绑定，而在react中是单向数据绑定。
一 单向和双向数据绑定其实不是完全没关系的
表单的双向绑定，说到底不过是 （value 的单向绑定 + onChange 事件侦听）的一个语法糖，你如果不想用 v-model，像 React 那样处理也是完全可以的。另一方面，组件间的数据传递，Vue 默认是单向的，和 React 一样。
上面这段话是尤雨溪在回答Vue和React的使用场景和深度有何不同？这个问题中提到的。既然数据从V(view)->M(model)的绑定都是通过事件监听实现，那我们主要把重点放在对数据从M->V的绑定。
二 Vue和React中数据绑定原理
在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制purerender，但Vue将此视为默认的优化。
vue中实现数据绑定靠的是数据劫持（Object.defineProperty()）+发布-订阅模式。在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件需要被重渲染。你可以理解为每一个组件都已经自动获得了shouldComponentUpdate，并且没有上述的子树问题限制。Vue对比其他框架
我们来看看视图更新的流程
react:
react-update.png
React组件性高效渲染
vue:
vue-update.png
这里我们要注意的是watcher是来决定你要不要更新这个组件吧，而虚拟DOM是用来找出怎么以最小的代价来更新这个dom。两者并没有重复解的意味。
三 Vue和React中实现数据双向绑定
vue中
<input v-model="userName" />
<input v-bind:value="userName" v-on:input="userName = $event.target.value" />
第一行的代码其实只是第二行的语法糖。input 元素本身有个 oninput事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput。
react中
react-rebind.png
参考：
react和vue官网
网友评论