前端开发那些事儿

react和vue区别

2021-03-29  本文已影响0人  肥羊猪

两者本质的区别:模板和组件化的区别
Vue本质是MVVM框架,由MVC发展而来;
React是前端组件化框架,由后端组件化发展而来;
Vue使用模板
React使用JSX
React本身就是组件化
Vue是在MVVM上扩展的
共同点:
都支持组件化,都是数据驱动视图

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

Vue通过getter/setter以及一些函数的劫持,能精确知道数据变化
React默认是通过比较引用的方式进行的,如果不优化(pureComponent/shouldComponentUpdate)可能导致大量不必要的VDOM得重新渲染

数据流的不同:

vue1:
父子组件之间,props可以双向绑定
组件与DOM之间可以通过v-model双向绑定
vue2去掉了第一种,父子组件之间不能双向绑定了(但是提供了一个语法糖自动帮你通过事件的方式修改),并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。

React从诞生之初就不支持双向绑定,React一直提倡的是单向数据流,他称之为 onChange/setState()模式

高阶组件本质就是高阶函数,React的组件是一个纯粹的函数,所以高阶函数对React来说非常简单。
Vue中组件是一个被包装的函数,并不简单的就是我们定义组件的时候传入的对象或者函数。

组件通信的区别:

二者都有props
vue provide/inject 来实现父组件向子组件注入数据,可以跨越多个层级
react context 进行跨层级的通信

渲染模版的不同:

React是通过JSX渲染模版
而Vue是通过一种拓展的HTML语法进行渲染
React是在组件JS代码中,通过原生JS实现模板中的常见语法,比如插值,条件,循环等,都是通过JS语法实现的
Vue是在和组件JS代码分离的单独的模板中,通过指令来实现的,比如条件语句就需要 v-if 来实现

Vuex和Redux的区别:

在 Vuex 中,`$store` 被直接注入到了组件实例中,使用`dispatch`和`commit`提交更新。通过`mapState`或者直接通过`this.$store`来读取数据
组件中既可以` dispatch action `也可以 `commit updates`

在 Redux 中,我们每一个组件都需要显示的用 `connect `把需要的` props `和` dispatch` 连接起来。
Redux 中只能进行`dispatch`,并不能直接调用 `reducer` 进行修改。

Redux 使用的是不可变数据,而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state,而Vuex是直接修改.
Redux 在检测数据变化的时候,是通过 diff 的方式比较差异的,而Vuex其实和Vue的原理一样,是通过 getter/setter来比较的

diff算法不同:

Vue基于snabbdom库,它有较好的速度以及模块机制。Vue Diff使用双向链表,边对比,边更新DOM。
React主要使用diff队列保存需要更新哪些DOM,得到patch树,再统一操作批量更新DOM。

事件机制不同:

Vue
Vue原生事件使用标准Web事件
Vue组件自定义事件机制,是父子组件通信基础
Vue合理利用了snabbdom库的模块插件

React
React原生事件被包装,所有事件都冒泡到顶层document监听,然后在这里合成事件下发。基于这套,可以跨端使用事件机制,而不是和Web DOM强绑定。
React组件上无事件,父子组件通信使用props

数据是否可变:
react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程,如果shouldComponentUpdate返回的是true,就继续渲染,如果返回了false,就不会重新渲染

vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom
vue:

Object.defineProperty 数据劫持监听双向绑定
this.data = 0

react:

view = f(state)
this.setState(data:0)

react的性能优化需要手动去做,而vue的性能优化是自动的,但是vue响应式机制也有问题,就是当state特别多的时候,Watcher也会很多,会导致卡顿,所以大型应用(状态特别多的)一般用react,更加可控

通过js来操作一切,还是用各自的处理方式:
react的思路是all in js,通过js来生成html,所以设计了jsx,还有通过js来操作css
vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中,html提供了模板引擎来处理。

类式的组件写法,还是声明式的写法:
react是类式的写法,api很少
vue是声明式的写法,通过传入各种optionsapi参数都很多。所以react结合typescript更容易一起写,vue稍微复杂。vue3支持class类式的写法了

react整体的思路就是函数式,所以推崇纯组件,数据不可变,单向数据流,当然需要双向的地方也可以做到,比如结合redux-form,而vue是基于可变数据的,支持双向绑定。react组件的扩展一般是通过高阶组件,而vue组件会使用mixin。vue内置了很多功能,而react做的很少,很多都是由社区来完成的,vue追求的是开发的简单,而react更在乎方式是否正确

上一篇下一篇

猜你喜欢

热点阅读