萝卜青菜各有所爱------深谈React和Vue

红太狼 2023-02-27 10:53 11阅读 0赞

### 前言 ###

由于我个人主要是用React的（公司项目都是在用react），但是Vue我也会写的，他们各有各的优点，缺点吧，接下来我们就详细的比较一下各个方面。

以下是我个人认为：

### 技术选择 ###

*  如果应用体积小，且要求速度快，考虑vue（vue更轻量）
 *  如果要构建一个大型应用程序，考虑React （react更复杂，但是技术和生态圈更成熟）
 *  如果要构建一个同时适用于Web端和原生App的框架，考虑React （react兼容移动端）

### 简介 ###

**React**

React 是全球最火的前端框架(Facebook推出的前端框架)  
React 是一个用于构建用户界面的 JAVASCRIPT 库。  
React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。  
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。  
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70][]

如果React.js的基本知识掌握的很6的话，再去学习ReactNative就很简单了！

**vue**

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue只关注视图层，采用自底向上增量开发的设计。

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

Vue的核心可只关注于视图层，不仅容易上手，还便于与第三方库（vue-router,vue-resource,vuex）或既有项目整合。

MVVM模式的实现者  
Model：模型层，在这里表示JavaScript对象。  
View：视图层，在这里表示DOM（HTML操作的元素）。  
ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中ViewModel层的实现者.  
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。

ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。

ViewModel能够监听到视图的变化，并能够通知数据发生改变。

到此，我们明白，Vue.js就是一个MVVM的实现者，它的核心就是实现了DOM监听与数据绑定。

### 优缺点对比 ###

**react**

优点：专注于view 视图; 社区活跃; React 支持 IE8;  
缺点：并不是一个完整的框架，只是一个类库; 学习难度大; 使用jsx 语法(推荐的做法是 JSX +inline style), 导致可维护性差; 需要编译环境;

React上手可能需要一定的基础，但是结构清晰明了。

**vue**

优点：学习难度小; 轻量级,专注于view 视图; 不需要编译（如果使用vue脚手架开发单页应用，还是需要编译和构建环境）,快速开发; 适用于快速开发小型项目;  
缺点：不是一个完整的框架; 对于大型项目可维护性差;

vue可能是易学难精。

### 相同点 ###

1、react和vue都支持服务端渲染

2、都有虚拟DOM，组件化开发，通过props传参进行父子组件数据的传递

3、都是数据驱动视图

4、都有支持native的方案（react的react native，vue的weex）

5、都有状态管理（react有redux，vue有vuex）

### 不同点 ###

1、react严格上只能算是MVC的view层，vue则是MVVM模式

2、虚拟DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树

而对于react而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

3、组件写法不一样，react推荐的做法是JSX+inline style,也就是把HTML和CSS全都写进javaScript了

4、数据绑定：vue实现了数据的双向绑定，react数据流动是单向的

5、state对象在react应用中是不可变的，需要使用setState方法更新状态

在vue中，state对象不是必须的，数据有data属性在vue对象中管理

### 区别 ###

Vue提供vue cli允许在创建项目的时候选择配置，但是react不行  
Vue使用模板，可以按照写html的方式写vue，react使用jsx，更偏向于js的逻辑，并且对于css的引进采用的是css in js的解决方案，例如emotion  
Vue在内部实现了双向绑定，而react需要手动实现

这是前端最火的两个框架，虽然说React是世界使用人数最多的框架，但是就在国内而言Vue的使用者很有可能超过React。两个框架都是非常优秀的，所以他们在技术和先进性上不相上下。  
React.js相对于Vue.js它的灵活性和协作性更好一点，所以我在处理复杂项目或公司核心项目时，React都是我的第一选择。而Vue.js有着丰富的API，实现起来更简单快速，所以当团队不大，沟通紧密时，我会选择Vue，因为它更快速更易用。（需要说明的是，其实Vue也完全胜任于大型项目，这要根据自己对框架的掌握程度来决定）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70]: /images/20230209/8f694d64808c460699858c7e1ddec774.png