vue 和 react 区别的详细介绍

概括:

        Vue是采用指令结合vue-loader实现构建用户界面的渐进式框架，React是采用jsx构建用户界面的组件化开发在渲染用户界面的时候，DOM的操作是最昂贵，但是没有库可以让这些原始操作变得更快。我们能做的最好的就是：尽量减少DOM操作。Vue 和 React 都使用虚拟DOM来实现，并且两者工作一样好；

vue官方文档中的官方解释:

vue和react 简介:

React:

       React是由Facebook开发的用于构建用户界面的JavaScript库，Facebook对市场上JavaScript MVC框架都不太满意，Facebook就自己写了一套用于架设Instagram，React由此诞生。

        React主张是函数式编程的理念， 实现了前端界面的高性能高效率开发，react很擅长处理组件化的页面。React的官方网站提到了“学习一次，随处写作”这个关键功能，可以使用React框架在JavaScript中构建移动应用程序。在 React 中，所有的组件的渲染功能都依靠 JSX，它是JavaScript的语法扩展，它在创建UI组件和调试时非常简单有用。

Vue:

        Vue是一个用于为Web构建的UI的渐进式框架。它最初于2014年由前Google开发人员Evan You发布，他使用AngularJS并决定排除Angular框架的痛点并构建轻量级的东西。 

        Vue是渐进式JavaScript框架。“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念。Vue可以在任意其他类型的项目中使用，使用成本较低，更灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发。特点：易用（使用成本低），灵活（生态系统完

         在 React 中，所有的组件的渲染功能使用的都是JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖，它可以使用的完整的编程语言JavaScript来构建视图页面，工具对JSX的支持相比于现有可用的其他Vue模板还是比较先进的，在 Vue 中我们采用的 Web 技术并在其上面扩展，使用Template在写模板的过程中，样式风格已确定和更少地涉及业务逻辑,一个模板总是被声明的,模板中任何 HTML 都是有效的,相比之下，React功能没有 Vue 模板系统的丰富。需要从组件文件中分离出HTML代码。

        在性能方面，当我们考虑重新渲染功能。当组件的状态发生变化时，React的机制会触发整个组件树的重新呈现，并且由于 React 有大量的检查机制，能让它提供许多有用的警告和错误提示信息，但可能需要使用额外的属性来避免不必要地重新渲染子组件。虽然Vue的重新渲染功能是开箱即用的，但Vue提供了优化的重新渲染，其中系统在渲染过程中跟踪依赖关系并相应地工作。

        在React中应用中的状态是（React）关键的概念。也有一些配套框架被设计为管理一个大的state对象，如Redux。此外，state对象在React应用中是不可变的，意味着它不能被直接改变（但是=赋值的时候是可以改变的 只是不会重新渲染页面）。在React中你需要使用setState()方法去更新状态；在Vue中，state对象并不是必须的，数据由data属性在Vue对象中进行管理，而在Vue中，则不需要使用如setState()之类的方法去改变它的状态，在Vue对象中，data参数就是应用中数据的保存者。

两者的区别

1、数据是否可变

React：整体是函数式的思想，在react中，是单向数据流，推崇结合immutable来实现数据不可变。
Vue：vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

2、编译&写法

React：思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等。
Vue：把html，css，js组合到一起，用各自的处理方式，Vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。

3、重新渲染和优化

当你比较React和Vue时，速度不能成为决定哪个更好的重要比较因素。在性能方面，让我们考虑重新渲染功能。当组件的状态发生变化时，React的机制会触发整个组件树的重新呈现。您可能需要使用额外的属性来避免不必要地重新渲染子组件。虽然Vue的重新渲染功能是开箱即用的，但Vue提供了优化的重新渲染，其中系统在渲染过程中跟踪依赖关系并相应地工作。重新渲染是Vue最显着的特征，也使其成为全世界开发人员广泛接受的框架。

4、类式的组件写法，还是声明式的写法

react是类式的写法，api很少，而Vue是声明式的写法，通过传入各种options，api和参数都很多。所以react结合typescript更容易一起写，Vue稍微复杂。

5、路由和状态管理解决方案

在像React和Vue这样的基于组件的框架中，当您开始扩展应用程序时，需要更加关注状态管理和数据流。这是因为有许多组件相互交互并共享数据。在这种情况下，React提供了一种称为Flux / Redux架构的创新解决方案，它代表单向数据流，是著名MVC架构的替代方案。现在，如果我们考虑Vue.js框架，就会有一个名为Vuex的更高级架构，它集成到Vue中并提供无与伦比的体验。

6、构建工具

React和Vue都有一个非常好的开发环境。只需很少或没有配置，就可以创建应用程序，能够使用最新的实践和模板。在React中，有一个Create React App（CRA），在Vue中，它是vue-cli。这两种引导工具都倾向于提供舒适灵活的开发环境，并提供开始编码的出色起点。

笼统的概括:

相同点：

1. 都支持服务器端渲染
2. 都使用虚拟DOM来实现
3. 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
4. 只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。
5. 都是JavaScript的UI框架，数据驱动视图，专注于创造前端的富应用
6. 都有支持native的方案,React的React native,Vue的weex
7. 都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）

不同点：

1. React严格上只针对MVC的view层,Vue则是MVVM模式
2. virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.
3. 而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
4. 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’;
5. Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件;
6. 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
7. state对象在react应用中不可变的,需要使用setState方法更新状态;
8. 在vue中,state对象不是必须的,数据由data属性在vue对象中管理

9. 解法对比及优缺点
   在以下场景中，Vue比React更好：
   最新文档和更简单的语法。更小，更快，更灵活。丰富的HTML模板，易于开发。
   React比Vue.js好：
   需要构建移动应用程序。专业和出色的社区支持，以解决任何问题。需要构建大型应用程序。轻量级，易于版本迁移

10. Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。

各自优势:

React

①灵活性和响应性：它提供最大的灵活性和响应能力。
②丰富的JavaScript库：来自世界各地的贡献者正在努力添加更多功能。
③可扩展性：由于其灵活的结构和可扩展性，React已被证明对大型应用程序更好。
④不断发展： React得到了Facebook专业开发人员的支持，他们不断寻找改进方法。
⑤web或移动平台： React提供React Native平台，可通过相同的React组件模型为iOS和Android开发本机呈现的应用程序。

Vue

①易于使用： Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。
②更顺畅的集成：无论是单页应用程序还是复杂的Web界面，Vue.js都可以更平滑地集成更小的部件，而不会对整个系统产生任何影响。
③更好的性能，更小的尺寸：它占用更少的空间，并且往往比其他框架提供更好的性能。
④精心编写的文档：通过详细的文档提供简单的学习曲线，无需额外的知识; HTML和JavaScript将完成工作。
⑤适应性：整体声音设计和架构使其成为一种流行的JavaScript框架。它提供无障碍的迁移，简单有效的结构和可重用的模板。

总结

  我们发现， Vue的优势包括： 模板和渲染函数的弹性选择， 简单的语法及项目创建， 更快的渲染速度和更小的体积；React的优势包括： 更适用于大型应用和更好的可测试性，同时适用于Web端和原生App， 更大的生态圈带来的更多支持和工具 。
  而实际上，React和Vue都是非常优秀的框架，它们之间的相似之处多过不同之处，并且它们大部分最棒的功能是相通的。如果想将降低学习成本或前端JavaScript框架集成到现有应用程序中，Vue是更好的选择，如果想构建大型应用项目或者使用JavaScript构建移动应用程序，React绝对是最好的选择。