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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

前言

由于我个人主要是用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 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

如果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也完全胜任于大型项目，这要根据自己对框架的掌握程度来决定）

以上是 萝卜青菜各有所爱------深谈React和Vue 的全部内容， 来源链接： utcz.com/z/384168.html

回到顶部