react和vue的区别 应用场景

目录：

1. 监听数据变化的实现原理不同

2. 数据流的不同

3. HoC和mixins

4. 组件通信的区别

5. 模板渲染方式的不同

6. 渲染过程不同

7. 框架本质不同

8. 开发过程中

9. 开发应用时

应用场景：

react 和 vue 是我们做前端中必不可少的，一般看公司都在使用什么，你就要用什么，一般规模大的公司都会使用react+ts/react+hook，小公司使用vue2.0多一点，但不是全方面的，那么我们来说说react和vue有什么区别：

1. 监听数据变化的实现原理不同

Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化

React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的 VDOM的重新渲染

2. 数据流的不同

Vue1.0中可以实现两种双向绑定：父子组件之间，props可以双向绑定；组件与DOM 之间可以通过v-model双 向绑定

React一直不支持双向绑定，提倡的是单向数据流，称之为onChange/setState()模式

3. HoC和mixins

Vue组合不同功能的方式是通过mixin，Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传 入的对象或者函数

React组合不同功能的方式是通过HoC(高阶组件）

4. 组件通信的区别

React 本身并不支持自定义事件，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数，但Vue更倾 向于使用事件

在React中我们都是使用回调函数的，这可能是他们二者最大的区别

5. 模板渲染方式的不同

在表层上，模板的语法不同，React是通过JSX渲染模板；而Vue是通过一种拓展的HTML语法进行渲染

模板的原理不同，React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都 是通过JS语法实现的，更加纯粹更加原生。而Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的

6. 渲染过程不同

Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要 重新渲染整个组件树

React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可 以进行控制，但Vue将此视为默认的优化

7. 框架本质不同

Vue本质是MVVM框架，由MVC发展而来

 React是前端组件化框架，由后端组件化发展而来

8. 开发过程中

vue适合开发小型应用

react适合开发大型应用

9. 开发应用时

vue使用uni-app开发app

react使用 react-Native