Vuex和全局事件总线的区别

我们知道，全局事件总线的方法同样可以实现任意组件之间的通信，它是依靠Vue的特性结合一些技巧实现的，不需要第三方支持，那么Vuex和全局事件总线$bus相比全局事件总线有什么区别呢？下面来讨论一下：总线和Vuex的常用组件可以发现它们的原理是完全一样的。它们都使用了Vue数据代理这个重要的内建关系：VueComponent.prototype.__proto__===Vue.prototype我们来看看使用总线和状态管理时调用的API/*--------eventbus------------*///事件总线绑定事件this.$bus.$on('handleAdd',handleAdd)//事件总线触发事件this.$bus.$emit('handleAdd',this.count)/*--------状态管理------------*///获取状态this.$store.state.count//修改状态this.$store.dispatch('increment',this.count)this.$store.commit('INCREMENT',this.count)我们可以看到调用它们的方式是在组件中使用this来获取给它们，this这里指向当前实例化的组件（VueComponent），所以我们可以通过VueComponent.prototype.__proto__===Vue.prototype的内建关系知道数据最终是通过原型链$bus/store找到的，所以不管是Vuex还是bus，让$bus/store全局可用的原理都是一样的，就是创建它们在Vue的原型对象上。constvm=newVue({render:h=>h(App),//创建总线beforeCreate(){Vue.prototype.$bus=this},//创建状态管理仓库存储,}).$mount('#app')我们可以看看Vue.use(Vuex)为我们做了什么//Vuex提供了install属性，通过Vue.use(Vuex)注册。constinstall=function(Vue){Vue.mixin({beforeCreate(){if(this.$options.store){Vue.prototype.$store=this.$options.store}}})}原理正是相同的！！bus和Vuex的优缺点是否使用第三方插件Eventbus不是三方库，但是状态管理是一个强大且配套的第三方库。事件总线不是三方库。章节开头提到，全局事件总线是基于Vue的特性结合一些技术实现的，不需要第三方支持。他依靠Vue实例对象上的方法实现了事件绑定（$on）、触发（$emit）、解除绑定（$off）。)，或者工具人来完成组件之间的任意通信。可以是组件的实例化对象（VueComponent）也可以是Vue实例本身（VM）【常用】，当$bus是Vue实例本身时，原型链上会出现闭环，即$bus=Vue实例化对象。简而言之，全局事件总线是依靠Vue元编程的特性，总结经验，没有使用第三方插件（消息订阅发布，状态管理都是三方库）而形成的产物。状态管理是一个三方库。说到三方库，我们都说能存活下来，能被大家fork出来的库，一般都是niubility项目。它们通常带有优雅和力量等标签。状态管理就是其中之一。状态管理作为三方库是符合Vue对渐进式框架定位的产物。是否使用状态管理，主要看有没有必要拿大锤杀猪。看看源码就知道为什么是大锤了。/***在Vue.js中扩展接口*/importVue,{ComponentOptions}from"vue";import{Store}from"./index";declaremodule"vue/types/options"{interfaceComponentOptions{商店?:商店<任何>;}}declaremodule"vue/types/vue"{interfaceVue{$store:Store;}}我们不需要看源码，只需要看懂他在引入vue就可以了，在实现上，我们可以看到Store仓库中Vue的实例化对象都出现了，所以就明白了它在我们心中。其实Vuex是直接创建了一个vm作为工具（bus），封装的更优雅也更强大。vuex直接创建了一个vue实例，而bus最多只是在我们创建的vue实例上打个小仗，所以有时候我们在小项目中使用vuex的时候，会有一种杀猪蹄铁的调侃。优雅吗？经过前面的对比，读者一定知道它们在实现上其实是差不多的，状态管理可能只是在总线的基础上进行了优化。没错，这就是Vuex的核心竞争力——优雅。熟练使用$bus事件总线的读者会发现$bus其实也有一些小问题。$on绑定的事件名称不能重复。$on绑定数据后，需要在组件销毁前使用。$off解除绑定事件，Vuex是响应式的，这和双向数据绑定的原理是一样的。它使用getters和setters进行数据劫持，使用配置对象的形式来控制数据，所以当触发的事件名称相同时，会触发相同名称对应的方法，不需要解除绑定事件，这是非常优雅的。这些是我总结的差异。如有错误，欢迎在评论区指正。补充：__proto__和prototype的区别，关系对象有属性__proto__，可以称为隐式原型。一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例可以访问构造函数原型中定义的属性和方法。