持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

思路梳理

一、共同点

1.数据驱动视图

在过去属于jquery的时代，我们需要频繁的操作DOM来实现页面效果与交互；而Vue和React 则解决了这一痛点，采用数据驱动视图方式隐藏操作DOM的频繁操作。所以我们在开发时，只需要关注数据变化即可，但是二者实现方式又不尽相同。

2.组件化

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

所以在开发时都有相同的套路，比如都有父子组件传递，都有数据状态管理、前端路由、插槽等。

3.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开销要小的多）

二、不同点

1.核心思想不同

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

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

2.组件写法差异

React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js; Vue 推荐的做法是 template 的单文件组件格式(简单易懂，从传统前端转过来易于理解),即 html,css,JS 写在同一个文件(vue也支持JSX写法)

3.Diff算法不同

diff 算法

-   diff算法很早就有

-   diff算法应用很广泛，例如提交**github pr** 或者（**gitlab mr**）

-   如果要严格diff两棵树，时间复杂度是 `O(n^3)` ，算法不可用。

tree diff优化

-   之比较同一层级，不跨级比较

-   tag 不同则删掉重建（不再去比较内部的细节）

React diff 特点

-   仅向右移动

Vue2 diff 特点

-   时从新旧 children 的两端开始进行比较，借助 key 可以复用的节点。

-   定义四个指针(oldStartNode, oldEndNode, newStartNode, newEndNode),两两进行比较，之后每移动一次，都会进行一次比较，知道移动到中间的时候相遇了

Vue3 diff 特点

-   最长递增子序列

详情React和Vue的Diff区别

4.响应式原理不同

Vue

Vue依赖收集，自动优化，数据可变。
Vue递归监听data的所有属性,直接修改。
当数据改变时，自动找到引用组件重新渲染。

React

React基于状态转移（数据），手动优化，数据不可变，需要setState驱动新的state替换老的state。当数据改变时，以组件为根目录，默认全部重新渲染, 所以 React 中会需要 shouldComponentUpdate 这个生命周期函数方法来进行控制

其他不同

api的差异也挺大的，Vue为了更加简单易用，引入了指令、filter等概念以及大量的option API,比如 watch、computed等都是非常好用的。

而React的API比较少

Vue源码思路

React源码思路

本文参考

Vue Diff <|>React Diff <|>前端风神 <|>是洋柿子啊

Vue和React的区别