React和VUE的区别和优缺点
前⾔
React 是由Facebook创建的JavaScript UI框架,React推⼴了 Virtual DOM( 虚拟 DOM )并创造了 JSX 语法。JSX 语法的出现允许我们在javascript 中书写 HTML 代码。
VUE 是由尤⾬溪开发的,VUE 使⽤了模板系统⽽不是JSX,因其实模板系统都是⽤的普通的 HTML,所以对应⽤的升级更⽅便、更容易,⽽不需要整体重构。
VUE 相较于 React 更容易上⼿,如果是⼀个有⼀定开发经验的开发者,甚⾄都不需要花额外的时间去学习,直接⼀遍开发⼀遍查⽂挡即可。
VUE 与 React 区别
记住我React 的思路是 HTML in JavaScript 也可以说是 All in JavaScript,通过 JavaScript 来⽣成 HTML,所以设计了 JSX 语法,还有通过 JS 来操作 CSS,社区的styled-component、JSS等。
Vue 是把 HTML,CSS,JavaScript 组合到⼀起,⽤各⾃的处理⽅式,Vue 有单⽂件组件,可以把 HTML、CSS、JS 写到⼀个⽂件
中,HTML 提供了模板引擎来处理。
如下是两者的⽣命周期对⽐:
React ⽣命周期
VUE⽣命周期
React 整体是函数式的思想,在 React 中是单向数据流,推崇结合 immutable 来实现数据不可变。⽽ Vue 的思想是响应式的,也就是基于是数据可变的,通过对每⼀个属性建⽴ Watcher 来监听,当属性变化的时候,响应式的更新对应的虚拟 DOM。
如上,所以 React 的性能优化需要⼿动去做,⽽Vue的性能优化是⾃动的,但是Vue的响应式机制也有问题,就是当 state 特别多的时
候,Watcher 会很多,会导致卡顿。
React 与 VUE 共同点
React 与 Vue 存在很多共同点,例如他们都是 JavaScript 的 UI 框架,专注于创造前端的富应⽤。不
同于早期的 JavaScript 框架“功能齐全”,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 的响应式机制也有问题,当 state 特别多的时候,Watcher 会很多,会导致卡顿,所以⼤型应⽤(状态特别多的)⼀般⽤React,更加可控。可对于易⽤性来说,VUE 是更容易上⼿的,对于项⽬来说新⼈更容易接⼿。
使⽤ Reac 的公司:Facebook,Instagram,Netflix,纽约时报,雅虎,WhatsApp,Codecademy,Dropbox,Airbnb,Asana,微软等。使⽤ Vue 的公司:Facebook,Netflix,Adobe,Grammarly,Behance,⼩⽶,阿⾥巴巴,Codeship,Gitlab和Laracasts等。
所以,技术没有哪个更好或者是更优秀,只要适合⾃⼰的才是最合适的。