谈谈React与Vue的不同点和相同点

Posted 勇敢*牛牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了谈谈React与Vue的不同点和相同点相关的知识,希望对你有一定的参考价值。

React与Vue的相同点

(1)都支持服务器渲染;

(2)都是数据驱动视图;

在以前,我们需要频繁操作DOM实现页面效果。而Vue和React就隐藏了DOM的频繁操作,采用数据驱动视图的方式,只需要关注数据的变化。

(3)都遵循组件化思想;
React和Vue都遵循组件化思想,它们把注意力放在UI层,将页面分成一一些细块,也就是组件,组件之间组合嵌套就形成最后的网页界面。

(4)都使用虚拟DOM;

(5)都有状态管理;

react有redux,vue有vuex。


不同点

(1)框架本质不同;

Vue本质是MVVM框架,是由MVC发展来的;
React是前端组件框架,是由后端组件演化而来的。

(2)数据流不同;

Vue实现双向绑定,在vue1.0中有两种方法可以实现双向绑定,父子组件之间的props以及组件与DOM直接的v-model。vue2去掉了第一种双向绑定方法,通过v-model实现数据双向绑定。

React一直不支持双向绑定,提倡的是单向数据流(onChange/setState)。

(3)监听数据变化的实现原理不同;

Vue通过getter,setter以及一些函数的劫持,能精确知道数据的变化。
React是通过比较引用方式(diff)进行的,当应用的状态改变时,全部组件都会重新渲染。

(4)组件写法差异;

React推荐的做法是JSX + inline style, 也就是把 html 和 CSS 全都写进 javascript 中;
Vue 推荐的做法是 template 的单文件组件格式,即 html,css,JS 写在同一个文件(vue也支持JSX写法)

(5)渲染过程不同。

Vue可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。

React在应用的状态被改变时,全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制。

(6)在state上的不同;

React中,state对象需要用setState方法更新状态;
在Vue中,state对象不是必须的,数据由data属性在vue对象中管理。

以上是关于谈谈React与Vue的不同点和相同点的主要内容,如果未能解决你的问题,请参考以下文章

谈谈对Angular,Vue,React 的认识

谈谈对Angular,Vue,React 的认识

React与Vue的相同与不同点

vue与react的区别

react和vue的比较

react和vue区别