Vue 和 React 的对比

weixin79893765432...

已于 2022-10-10 19:39:45 修改

阅读量1.3k

点赞数

分类专栏： # Vue.js # React.js 文章标签： React Vue

于 2021-09-06 11:12:00 首次发布

本文链接：https://blog.csdn.net/mChales_Liu/article/details/120130047

版权

Vue.js 同时被 2 个专栏收录

52 篇文章 9 订阅

订阅专栏

React.js

28 篇文章 4 订阅

订阅专栏

前言

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 的对比方式更加高效。