Vue和React全方位对比

本文概要

Vue 和 React 作为当前前端两大火热的框架，面试的时候自然不少被提及：

请说一下你对react/vue框架的理解
请对比一下两大框架的优缺点
其实react和vue大体上是相同的，比如都使用虚拟DOM高效的更新视图，都提倡组件化，都实现了数据驱动视图，都使用diff算法，也都对diff算法进行了优化，都有router库实现url到组件的映射，都有状态管理等等…

但是在具体实现上又不尽相同，接下来就概念、从组件化、虚拟DOM、数据驱动视图等方面对比下vue和react框架的相同和不同之处。

一.概念

• React官网说：React是用于构建用户界面的Javascript库。
• Vue官网说：Vue是用于构建用户界面的Javascript渐进式框架。

一个说自己是库，一个说自己是框架，我们就先从这个细节说起。如下图

Vue说自己是框架，是因为官方提供了从声明式渲染到构建工具一整套东西。

React说自己是库，是因为官方只提供了React.js这个核心库，路由、状态管理这些都是社区第三方提供了，最终整合成了一套方案。

两者最终达到的效果是相同的，也就是渐进式的解决方案，根据需求复杂度的不同，Vue和React都可以提供相匹配的、合适的解决方案。

二.组件化

2.1 对于组件化的理解，组件化带来的好处

组件是独立和可复用的代码组织单元，它使开发者使用小型、独立和通常可复用的组件构建大型应用;
组件化开发能大幅提高应用开发效率、测试性、复用性等;
降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

2.1 react和vue中组件化的相同点

react和vue都推崇组件化，通过将页面拆分成一个一个小的可复用单元来提高代码的复用率和开发效率。在开发时react和vue有相同的套路，比如都有父子组件传参，都有数据状态管理，都有前端路由等。

2.3 react和vue组件化的差异

React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js;

Vue 推荐的做法是 template 的单文件组件格式(简单易懂，从传统前端转过来易于理解),即 html,css,JS 写在同一个文件(vue也支持JSX写法)。

三.虚拟DOM

3.1 什么是虚拟DOM

虚拟 DOM（Virtual DOM）本质上是JS 和 DOM 之间的一个映射缓存，它在形态上表现为一个能够描述 DOM 结构及其属性信息的 JS 对象。它主要存储在内存中。主要来说：

• 虚拟dom是一个js对象，存储在内存之中。
• 虚拟dom能够描述真实dom（存在一个对应关系）。
• 当数据变化的时候，生成新的DOM，对比新旧虚拟DOM的差异，将差异更新到真实DOM上。

3.2 虚拟DOM的优点

• 减少 DOM 操作：虚拟 DOM 可以将多次 DOM 操作合并为一次操作
• 研发效率的问题：虚拟 DOM 的出现，为数据驱动视图