react+html+数据绑定,Vue和React数据绑定对比

在数据绑定上来说，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

三 Vue和React中实现数据双向绑定

vue中

第一行的代码其实只是第二行的语法糖。input 元素本身有个 oninput事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput。

react中

react-rebind.png

参考：

react和vue官网