手记

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


0人推荐
随时随地看视频
慕课网APP