Vue和React的区别

原创已于 2025-04-07 19:01:18 修改 · 1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #vue.js #前端

于 2025-04-07 19:01:04 首次发布

今天小编来带大家复习一下Vue 和React的区别

1 两者的共同点

数据驱动视图

组件话开发的思想

采用虚拟Dom 进行渲染 Virtual DOM

2 不同点：

核心思想不同

写法的差异

diff 算法的不同

响应式原理的不同

源码的差异

下面我们来讲解一下这两种框架的共同电：

1.数据驱动视图

在过去使用jqury的时代，我们需要频繁的操作dom 来实现页面与效果的交互，而Vue和react 则解决了这一痛点：采用数据驱动视图的方式隐藏Dom 的频繁操作，所以我们在开发事只需要关注数据变化即可，但是两者实现的方式不同

2.组件化

：

在vue和react中都遵循组件话开发的思想，他们把框架放在Ui层面，将页面分成一下细块，这写块就是组件之间的组合，潜逃就形成了最后的网页页面

Virtual DOM

Vue与React都使用了 Virtual DOM + Diff算法，不管是Vue的Template模板+options api 写法，还是React的Class或者Function写法,最后都是生成render函数，而render函数执行返回VNode(虚拟DOM的数据结构，本质上是棵树)。

当每一次UI更新时，总会根据render重新生成最新的VNode，然后跟以前缓存起来老的VNode进行比对，再使用Diff算法（框架核心）去真正更新真实DOM（虚拟DOM是JS对象结构，同样在JS引擎中，而真实DOM在浏览器渲染引擎中，所以操作虚拟DOM比操作真实DOM开销要小的多

作者：小鹏爱摸鱼
链接：https://juejin.cn/post/7111243617653506085
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

不同点：

核心思想的不同：

Vue早期开发就尤雨溪大佬，所以定位就是尽可能的降低前端开发的门槛，让更多的人能够更快地上手开发。这就有了vue的主要特点：灵活易用的渐进式框架，进行数据拦截/代理，它对侦测数据的变化更敏感、更精确。

React 从一开始的定位就是提出 UI 开发的新思路。背靠大公司Facebook 的React，从开始起就不缺关注和用户，而且React想要做的是用更好的方式去颠覆前端开发方式。所以React推崇函数式编程（纯组件），数据不可变以及单向数据流,当然需要双向的地方也可以手动实现，比如借助onChange和setState来实现。

组件写法的差异：

React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js;

Vue 推荐的做法是 template 的单文件组件格式(简单易懂，从传统前端转过来易于理解),即 html,css,JS 写在同一个文件(vue也支持JSX写法)

Diff 算法的差异：

diff算法很早就有 - diff算法应用很广泛，例如提交**github pr** 或者（**gitlab mr**） - 如果要严格diff两棵树，时间复杂度是 `O(n^3)` ，算法不可用。