概括:
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。这两种引导工具都倾向于提供舒适灵活的开发环境,并提供开始编码的出色起点。
笼统的概括:
相同点:
- 都支持服务器端渲染
- 都使用虚拟DOM来实现
- 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
- 只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。
- 都是JavaScript的UI框架,数据驱动视图,专注于创造前端的富应用
- 都有支持native的方案,React的React native,Vue的weex
- 都有管理状态,React有redux,Vue有自己的Vuex(自适应vue,量身定做)
不同点:
- React严格上只针对MVC的view层,Vue则是MVVM模式
- virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.
- 而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
- 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’;
- Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件;
- 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
- state对象在react应用中不可变的,需要使用setState方法更新状态;
- 在vue中,state对象不是必须的,数据由data属性在vue对象中管理
解法对比及优缺点
在以下场景中,Vue比React更好:
最新文档和更简单的语法。更小,更快,更灵活。丰富的HTML模板,易于开发。
React比Vue.js好:
需要构建移动应用程序。专业和出色的社区支持,以解决任何问题。需要构建大型应用程序。轻量级,易于版本迁移- 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绝对是最好的选择。