框架简介
React
React主张是函数式编程的理念, 实现了前端界面的高性能高效率开发,react很擅长处理组件化的页面。React的官方网站提到了“学习一次,随处写作”这个关键功能,可以使用React框架在JavaScript中构建移动应用程序。在 React 中,所有的组件的渲染功能都依靠 JSX,它是JavaScript的语法扩展,它在创建UI组件和调试时非常简单有用。
Vue
Vue是渐进式JavaScript框架。“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念。Vue可以在任意其他类型的项目中使用,使用成本较低,更灵活,主张较弱,在Vue的项目中也可以轻松融汇其他的技术来开发。特点:易用(使用成本低),灵活(生态系统完善,适用于任何规模的项目),高效(体积小,优化好,性能好)。
共同点:
①都使用虚拟dom。 ②提供了响应式和组件化的视图组件。 ③把注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。(vue-router、vuex、react-router、redux等等)
各自优势
React
①灵活性和响应性:它提供最大的灵活性和响应能力。 ②丰富的JavaScript库:来自世界各地的贡献者正在努力添加更多功能。 ③可扩展性:由于其灵活的结构和可扩展性,React已被证明对大型应用程序更好。 ④不断发展: React得到了Facebook专业开发人员的支持,他们不断寻找改进方法。 ⑤web或移动平台: React提供React Native平台,可通过相同的React组件模型为iOS和Android开发本机呈现的应用程序。
Vue
①易于使用: Vue.js包含基于HTML的标准模板,可以更轻松地使用和修改现有应用程序。 ②更顺畅的集成:无论是单页应用程序还是复杂的Web界面,Vue.js都可以更平滑地集成更小的部件,而不会对整个系统产生任何影响。 ③更好的性能,更小的尺寸:它占用更少的空间,并且往往比其他框架提供更好的性能。 ④精心编写的文档:通过详细的文档提供简单的学习曲线,无需额外的知识; HTML和JavaScript将完成工作。 ⑤适应性:整体声音设计和架构使其成为一种流行的JavaScript框架。它提供无障碍的迁移,简单有效的结构和可重用的模板。
两者区别
1、数据是否可变
React:整体是函数式的思想,在react中,是单向数据流,推崇结合immutable来实现数据不可变。 Vue:的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom。
2、编译&写法
React:思路是通过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的diff和Vue的diff算法的不同之处
vue和react的diff算法都是进行同层次的比较,主要有以下两点不同:
vue对比节点,如果节点元素类型相同,但是className不同,认为是不同类型的元素,会进行删除重建,但是react则会认为是同类型的节点,只会修改节点属性。 vue的列表比对采用的是首尾指针法,而react采用的是从左到右依次比对的方式,当一个集合只是把最后一个节点移动到了第一个,react会把前面的节点依次移动,而vue只会把最后一个节点移动到最后一个,从这点上来说vue的对比方式更加高效。
5.响应式原理不同
React的响应式原理 React主要是通过setState()方法来更新状态,状态更新之后,组件也会重新渲染。
Vue的响应式原理 vue会遍历data数据对象,使用Object.definedProperty()将每个属性都转换为getter和setter,每个Vue组件实例都有一个对应的watcher实例,在组件初次渲染的时候会记录组件用到了那些数据,当数据发生改变的时候,会触发setter方法,并通知所有依赖这个数据的watcher实例调用update方法去触发组件的compile渲染方法,进行渲染数据。
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。这两种引导工具都倾向于提供舒适灵活的开发环境,并提供开始编码的出色起点。
六、应用场景
React
1、构建一个大型应用项目时:React的渲染系统可配置性更强,和React的测试工具结合起来使用,使代码的可测试性和可维护性更好。大型应用中透明度和可测试性至关重要。 2、同时适用于Web端和原生APP时:React Native是一个使用Javascript构建移动端原生应用程序(iOS,Android)的库。 它与React.js相同,只是不使用Web组件,而是使用原生组件。
Vue
1、构建数据简单中小型应用时:vue提供简单明了的书写模板、大量api、指令等等,可快速上手、开发项目 2、应用尽可能的小和快时:随着vue3.0的发布,vue的体积进一步缩小,远小于react的体积,也配合diff算法,采用proxy去实现双向绑定,渲染大幅度提升