Vue和React区别

简介: Vue和React区别

背景简介

React

主要是函数式编程概念

比较擅长处理组件化的页面

比较依赖于JSX

Vue

渐进式框架

可以在任意框架中进行使用(使用成本低)

成本低

灵活【生态系统完善】

高效【体积小,优化好,性能好】

共同点

都使用虚拟dom

提供响应式和组件化的视图组件

有相关的vue-router vuex react-router redux

不同点

React

灵活性和响应性

丰富的js库

可扩展性

不断发展

web或者移动平台

Vue

易用

更加流畅的集成

更好的性能,更小的占用空间

精心编写的文档

适应性

区别

数据是否可变

React:函数式思想,单向数据流,比较推荐immutable来实现数据的不可变

Vue:响应式,数据可变,通过监听每一个属性建立Watcher来进行监听,当属性变化的时候,响应的更新对应的虚拟dom

编写&写法

React:通过js生成html和css,所以设计了jsx

Vue:把css、js和html结合到一起,用各自的方式进行处理

重新渲染和优化

当组件的状态发生变化的时候,React的机制会触发整个组件树的重新呈现,我们可能需要额外的属性来进行避免不必要的子组件进行重新渲染

vue的重新渲染时开箱即用的,但Vue提供了优化的重新渲染会跟踪依赖并进行相应的工作

类组件写法 声明式写法

在react中类式写法很少,因为api很少

在Vue中式声明式写法,通过传入各种options api还有参数很多

react结合ts使用

vue比较复杂

路由和状态管理方案

React提供了一种称为Flux / Redux架构的创新解决方案,它代表单向数据流,是著名MVC架构的替代方案。现在,如果我们考虑Vue.js框架,就会有一个名为Vuex的更高级架构,它集成到Vue中并提供无与伦比的体验

构建工具

在React中,有一个Create React App(CRA),在Vue中,它是vue-cli。

应用场景

React

构建大型项目的时候进行使用

同时适用Web端和原生APP:React Native是一个使用Javascript构建移动端原生应用程序(iOS,Android)的库。 它与React.js相同,只是不使用Web组件,而是使用原生组件。

Vue

构建数据简单中小型应用时:Vue提供简单的书写模板、大量api、指令等,可快速上手、并发项目

应用尽可能地小和块:随着vue3.0的发布,vue的体积进一步缩小,远小于react的体积,也配合diff算法,采用proxy去实现双向绑定,渲染大幅度提升

总结

Vue的优势包括:

模板和渲染函数的弹性选择, 简单的语法及项目创建, 更快的渲染速度和更小的体积;React的优势包括: 更适用于大型应用和更好的可测试性,同时适用于Web端和原生App, 更大的生态圈带来的更多支持和工具

而实际上,React和Vue都是非常优秀的框架,它们之间的相似之处多过不同之处,并且它们大部分最棒的功能是相通的。如果想将降低学习成本或前端JavaScript框架集成到现有应用程序中,Vue是更好的选择,如果想构建大型应用项目或者使用JavaScript构建移动应用程序,React绝对是最好的选择。


相关文章
|
3天前
|
JavaScript
VUE里的find与filter使用与区别
VUE里的find与filter使用与区别
12 0
|
2天前
|
移动开发 JavaScript 前端开发
uni-app和Vue.js二者之间有什么区别?
1. uni-app是一个使用Vue.js开发所有前端应用的框架,支持一次编译多端运行。开发者编写的基础代码只需进行一次编写,就可以发布到多个平台,包括App、H5、微信小程序等。 2. Vue.js是一个渐进式JavaScript框架,用于构建用户界面。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。
4 0
|
5天前
|
缓存 JavaScript 开发者
什么是vue的计算属性?为什么使用?计算属性和方法有什么区别?怎样选择
什么是vue的计算属性?为什么使用?计算属性和方法有什么区别?怎样选择
9 0
|
7天前
|
JavaScript API 开发者
vue3与vue2的区别
vue3与vue2的区别
17 2
|
12天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
13天前
|
缓存 JavaScript
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
|
14天前
|
开发框架 缓存 前端开发
|
14天前
|
前端开发 JavaScript API
Vue.Draggable 和 React Beautiful DND 有什么区别
Vue.Draggable 和 React Beautiful DND 是两个用于 Vue.js 和 React 的拖拽排序库。Vue.Draggable 提供 Vue 指令,适合 Vue 应用,支持列表排序和自定义数据处理,具有多种事件回调和配置选项。React Beautiful DND 则为 React 提供组件,能处理复杂拖拽场景,通过回调函数更新状态,配置选项包括限制拖拽范围和自定义动画。
|
15天前
|
JavaScript 算法 前端开发
vue3和vue2得区别
Vue 3 优化了性能,引入了更快的虚拟 DOM 算法和模块化编译,提升渲染速度并减小打包文件大小。新引入的 Composition API 提高代码组织灵活性和可维护性。Vue 3 加强了 TypeScript 支持,改进响应式系统,使用 Proxy 实现更细粒度变化跟踪。此外,包体积更小,加载速度更快。尽管与 Vue 2 存在迁移成本,官方提供迁移指南和工具以协助平滑过渡。Vue 3 旨在提供更好的开发体验和效率。
|
16天前
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析