vue和react的区别

落叶--的悲伤

已于 2022-11-13 11:12:40 修改

阅读量257

点赞数

文章标签： vue.js react.js javascript

于 2022-11-12 22:05:02 首次发布

本文链接：https://blog.csdn.net/qq_51441159/article/details/127825107

版权

请添加图片描述

数据驱动视图不同

Vue中的数据驱动是通过 MVVM 框架来实现的
1. Model:指的是数据部分，对应到前端就是javascript对象
2. View:指的是视图部分，对应前端就是dom
3. ViewModel:就是连接视图与数据的中间件（桥梁）

首先，Vue在实例化的过程中会遍历实例化对象选项中的 data 选项，遍历其所有属性并添加 getter/setter。
同时，每一个实例对象都有自己的 watcher 实例对象，它会在模板编译的过程中，用 getter 去访问data的属性，watcher 此时就会把用到的data属性记为依赖并对依赖进行收集，这样就建立了视图与数据之间的联系。当之后我们渲染视图的数据依赖发生改变（即数据的setter被调用）的时候，watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染。这样就实现了所谓的数据对于视图的驱动。

React通过 setState 实现数据驱动视图，通过 setState 来引发一次组件的更新过程从而实现页面的重新渲染
1. setState() 首先将接收的第一个参数state存储在pending（所有等待更新的state）队列中；
2. 判断当前React是否处于批量更新状态，是的话就将需要更新state的组件添加到dirtyComponents中；（组件）
3. 不是的话，它会遍历dirtyComponents的所有组件，调用updateComponent方法更新每个dirty组件（开启批量更新事务）

Vue使用的是可变数据，而React更强调数据的不可变

数据流的不同

请添加图片描述

从上图可以看出在Vue1.0版本中可以实现两种双向绑定：（Vue 默认支持数据的双向绑定）
1. 父子组件之间，props 可以双向绑定
2. 组件与DOM之间可以通过 v-model 双向绑定
在Vue2.x版本中去掉了第一种（父子组件之间不能双向绑定）
React 从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，

模板编写方式不同

Vue 推荐的做法是 template 的单文件组件格式（将 HTML,CSS,JS 写在同一个文件中）
React推荐的做法是JSX + inline style，（就是把 HTML,CSS 全部写在 JavaScript 中,即 all in js）

DOM的更新策略不同

在React中，当状态发生改变时，组件树就会自顶向下的全diff，重新render页面，重新生成新的虚拟dom tree, 新旧dom tree进行比较，进行patch打补丁方式，局部更新dom。
Vue 在渲染过程中，会跟踪每一个组件的依赖关系，从而更快的计算出Virtual DOM 的差异，不需要重新渲染整个组件树。

HoC 和 mixins

在 Vue 中我们组合不同功能的方式是通过 mixin，而在React中我们通过 HoC (高阶组件）。

Vuex 和 Redux 的区别

Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改
Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的（如果看Vuex源码会知道，其实他内部直接创建一个Vue实例用来跟踪数据变化）