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

这里我们要注意的是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官网

作者：pattyzzh
链接：https://www.jianshu.com/p/6e124ad23c68