面试题：Vuex与Redux比较

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

今天为大家分享一道面试题：

vuex与redux的区别？

由于Vuex和Redux都是从Flux中衍生出来，同时Vuex对Redux部分思想也有一些借鉴，所以Vuex和Redux有很多相同点。

#相同点

state 共享数据

流程一致：定义全局state，触发，修改state

原理相似，通过全局注入store。

#不同点

从实现原理上来说：

Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改

Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的

从表现层来说：

vuex 定义了state、getter、mutation、action四个对象；

redux 定义了state、reducer、action。

vuex 中state统一存放，方便理解；

redux state依赖所有reducer的初始值

vuex 有getter,目的是快捷得到state；

redux 没有这层，react-redux mapStateToProps参数做了这个工作。

vuex 中 mutation只是单纯赋值(很浅的一层)；

redux 中reducer只是单纯设置新state(很浅的一层)。他俩作用类似，但书写方式不同

vuex 中action有较为复杂的异步ajax请求；

redux 中action中可简单可复杂,简单就直接发送数据对象（{type:xxx, your-data}）,复杂需要调用异步ajax（依赖redux-thunk插件）。

vuex触发方式有两种commit同步和dispatch异步；

redux同步和异步都使用dispatch

#详细解释

#Vuex

类型

state: 共享数据

getter: 快捷state

mutation: 同步更新，只是简单都赋值

action: 异步更新，可以调用commit来触发同步mutation

触发

commit 触发mutation同步操作

dispatch 触发action异步操作

库结合（自带）

mapState

mapGetters

mapMutations

mapActions

其他

UI跟state、action/dispatch相关

mutations 同步修改state。UI触发使用commit指令

action 内可以commit同步state或dispatch异步另外一个action。UI触发使用dispatch指令

#Redux

类型

store: 合并所有reducer，共享数据

reducer: 两个作用：1. 初始值合并获得state 2. 简单的赋值，获取新的state代替老的state

action: 触发函数。是唯一可以带上数据修改state的触发对象。接下逻辑就转移到reducer中

注：也可以反过来理解：Vuex的每一次this.$store.commit('type', data) === action(data){ return { type, data}}）

触发 (依赖react-redux)

dispatch触发同步或异步。使用mapDispatchToProps参数

库结合（依赖react-redux）

mapStateToProps

mapDispatchToProps

简单理解，reducer承担了state和mutations功能。Vuex 中 commit-mutations是唯一修改state的方式；Redux中dispatch-reducer是唯一修改state方式

#总结

• vuex的流向：
  • view——>commit——>mutations——>state变化——>view变化（同步操作）
  • view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操作）
• redux的流向：view——>actions——>reducer——>state变化——>view变化（同步异步一样）

参考：

https://zhuanlan.zhihu.com/p/508807939

苟有恒 , 何必三更眠五更起