Vue 和 React 的对比

---

前言

Vue 由 EvanYou 开发。
React 由 由 Facebook 开发。

React 版本
Vue 版本

一、vue2 与 react 15 的对比

此时 Vue 和 React 还都没支持 Hooks 语法。

1、vue2 与 react 15 的相同点

• 都支持声明式编程。
• 都使用虚拟 DOM，只更新那些已经修改的对象，从而实现快速渲染。
• 都是支持响应式组件，专注于组件化开发，将其他功能（如路由和全局状态管理等）交给相关的库来处理。

2、vue2 与 react 15 的不同点

（1）、数据流的不同

Vue 双向数据流：

• 父子组件之间，props 可以双向绑定；
• 组件与 DOM 之间可以通过 v-model 双向绑定。

React 单向数据流：

• 自顶向下，由外及内。
• 数据在某个节点被改动后，只会影响一个方向上的其他节点。
• 将父组件的方法以属性的形式传递给子组件，进而操作父组件的属性。

（2）、框架本质不同

Vue 采用 MVVM 框架，由 MVC 发展而来，详情请看 从 MVC 到 MVVM 软件架构。

React 既不属于 MVC 也不属于 MVVM 架构。React 是前端组件化框架，由后端组件化发展而来。

（3）、模板不同

模板的语法不同：

• Vue 采用 SFC（single-file-component）模板系统——组件包括 template、script 和 style 三个模块。将 HTML、CSS 和 JS 分离了。
• React 采用 JSX 语法。

模板的原理不同：

• Vue 是在单独的 template 模板中，通过一些列 Vue 指令来实现的。
• React 是在组件 JS 代码中，通过原生 JS 来实现模板的，更加原生，详见 React 与 DOM。

（4）、组件通信方式不同

Vue 中常用的 3 种组件通信的方式（具体请看 Vue 组件之间的通信）：

• 父组件通过 props 向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据。
• 子组件向父组件发送消息有两种方式：事件和回调函数。但 Vue 更倾向于使用事件。
• 可以通过 provide/inject 来实现父组件向子组件注入数据，可以跨越多个层级。

React 中常用的 3 种组件通信的方式（具体请看 React 组件的“组件间的通信”小节）：

• 父组件通过 props 可以向子组件传递数据或者回调。
• 子组件向父组件发送消息，都是使用回调函数的，这可能是他们二者最大的区别。
• 可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。

（5）、组合不同功能的方式不同

Vue 组合不同功能的方式是通过 mixin（vue3 弃用了），Vue 中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的？比如声明的 props 怎么接收到的？这些都是 vue 创建组件实例的时候隐式干的事。由于 vue 默默帮我们做了这么多事，所以我们自己如果直接把组件的声明包装一下，返回一个 HoC，那么这个被包装的组件就无法正常工作了。

React 组合不同功能的方式是通过 HoC（高阶组件）。React 最早也是使用 mixins 的，不过后来他们觉得这种方式对组件侵入太强会导致很多问题，就弃用了 mixinx 转而使用 HoC。高阶组件本质就是高阶函数，React 的组件是一个纯粹的函数，所以高阶函数对 React 来说非常简单。

（6）、state 数据的变更方式不同

Vue 中 state 对象不是必须的。数据由 data 属性在 vue 对象中管理，可以直接通过 this.state.属性名 来修改 state 对象里的数据。

React 中 state 对象是必须的。不能直接修改 state 对象里的数据，只能通过 setState() 方法更新 state 对象里的数据。

（7）、监听数据变化的实现原理不同

Vue：

• Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化。
• Vue 可以更快地计算出 Virtual DOM 的差异，这是因为 Vue 是以组件为颗粒度的，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

React：

• React 默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的 VDOM 的重新渲染。
• React 默认会重新渲染其全部子组件。当然，这也可以通过 shouldComponentUpdate 这个生命周期方法来进行控制，但 Vue 将此视为默认的优化。

为什么 React 不精确监听数据变化呢？这是因为 Vue 和 React 设计理念上的区别：

• Vue 使用的是可变数据。
• React 更强调数据的不可变。

Vue 和 React 的 diff 算法都是进行同层次的比较，主要有以下两点不同：

• Vue 对比节点，如果节点元素类型相同，但是 className 不同，认为是不同类型的元素，会进行删除重建，但是 React 则会认为是同类型的节点，只会修改节点属性。
• Vue 的列表对比采用的是首尾指针法，而 react 采用的是从左到右依次比对的方式，当一个集合只是把最后一个节点移动到了第一个，React 会把前面的节点依次移动，而 Vue 只会把最后一个节点移动到最后一个，从这点上来说 Vue 的对比方式更加高效。

二、vue3 和 react18 对比

1、vue3 和 react18 的相同点

在 vue2 与 react 15 的相同点 的基础上又增加了以下两点。

• 都用 hooks 来逻辑复用。
• 都支持 JSX 语法。

2、vue3 和 react18 的不同点

（1）、 react 使用更加灵活

react18 中使用 JSX 语法更加灵活，而 vue3 虽然也支持了 JSX 语法，但是使用较少。

vue3 的 SFC 是一把双刃剑，一方面它让 vue3 更易上手，让代码更易阅读与维护，另一方面，它需要到固定位置写逻辑，没 react18 的 JSX 语法灵活。

（2）、vue3 更智能的依赖收集

vue3 在模板中的数据可以被模板自动查询，而 react18 需要手动调用 useState 定义数据和修改数据的方法。

vue3 的 watchEffect 和 computed 是可以自动寻找依赖的，而 react18 的 useEffect、useMemo 和 useCallBack 的第二个参数“数组[]”需要写上依赖的数据。

（3）、vue3 和 react 优化手段不同

vue3 是以组件为颗粒度的，可以精准的找到需要更新的地方，组件拆分细一点，就可以达到一定优化效果。

react18 是对比差异来更新的，而且父组件更新，子组件默认也会更新，所以 react18 更新手段一个方法就是浅比较，判断父组件更新的时候，子组件是否要更新，从而跳过子组件更新。

【参考文章】
2022年前端框架趋势：React与Vue深度对比
React与Vue的区别和对比
Vue和React的使用场景和深度有何不同？
vue和react区别
Vue与REACT两个框架的区别和优势对比
Vue与React的区别和优势对比
思考vue3和react18的区别