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绝对是最好的选择。