阐述一下 VUE中 eventbus 的原理
解答：
EventBus是消息传递的一种方式，基于一个消息中心，订阅和发布消息的模式，称为发布订阅者模式。
on('name', fn)订阅消息，name:订阅的消息名称， fn: 订阅消息的函数（参数是接收的消息）
emit('name', args)发布消息, name:发布的消息名称 ， args：发布的消息
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。如果两个页面没有任何引入和被引入关系，该如何通信了？
vuex？那如果项目没那么复杂，不需要类似Vuex这样的库来处理组件之间的数据通信呢，这时候就可以考虑Vue中的 事件总线 ，即 EventBus来通信。
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
写的时候可能会碰到一些问题，嘿嘿，注意下发布/订阅时机，消息发布时，直接发布给（通知）订阅者，如果没有订阅者，就不发送。发布完毕了，再订阅，没用，只能等下次发布了，所以订阅事件必须在发布之前。
eg: A发布消息，B订阅消息
所以B页面要成功订阅消息的话，必须保证先加载B页面，然后再加载A，先把订阅者$on加载在内存中，否则拿不到消息。
我是钢筋我就必须刷新后先进A再进B。这就要先了解下Vue路由切换特性，vue路由切换时，会先加载新的组件，等新的组件渲染好但是还没有挂载前，销毁旧的组件，之后挂载新组件。
新组件beforeCreate
↓
新组件created
↓
新组件beforeMount
↓
旧组件beforeDestroy
↓
旧组件destroyed
↓
新组件mounted
注意，在$emit时，必须已经$on，否则将无法监听到事件。
所以正确的写法应该是在需要接收值的组件的created生命周期函数里写$on，在需要往外传值的组件的destroyed生命周期函数函数里写：
destroyed(){
eventBus.$emit('dataUpdate',data)
}
这样写，在旧组件销毁的时候新的组件拿到旧组件传来的值，然后在挂载的时候更新页面里的数据。
一、这种俩页面跳转完全可以通过router传参解决，感觉忙活一圈没卵用；
二、B、C页面订阅，A发布，在进入B或者C时，上面那个destroyed的方法，必须是从A进B页面，那进C时就没了，而且也无法从mounted中直接获取数据然后更改data数据，有局限。
所以我感觉这个EventBus主要应用场景应该是，一个页面中有多个组件，也可能组件套组件，这种情况用props和emit传参太麻烦，用EventBus正好解决问题。
问：vue兄弟组件如何通讯？
1、让兄弟组件通过一个共同的父组件做为通讯桥梁彼此通讯（props、$emit）。
2、EventBus
废话少说上代码：
event-bus.js
import Vue from "vue";
export const EventBus = new Vue();
a.vue
<template>
<button @click="sendMsg()">发送</button>
</template>
<script>
import { EventBus } from "@assets/utils/event-bus";
export default {
methods: {
sendMsg() {
EventBus.$emit("aMsg", "来自A页面的消息");
}
}
};
</script>
b.vue
<template>
<p>B页面，A发送来的消息：{{ msg }}</p>
</template>
<script>
import { EventBus } from "@assets/utils/event-bus";
export default {
data() {
return {
msg: "defaultMsg"
};
},
mounted() {
EventBus.$on("aMsg", msg => {
// A发送来的消息
this.msg = msg;
});
}
};
</script>
上面就是 EventBus 的使用方法，是不是很简单。但每次使用 EventBus 时都需要在各组件中引入 event-bus.js 。事实上，我们还可以让事情变得更简单一些。那就是创建一个全局的 EventBus 。
全局EventBus
main.js
...
var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: function() {
return EventBus;
}
}
});
...
a.vue
<template>
<button @click="sendMsg()">发送</button>
</template>
<script>
import { EventBus } from "@assets/utils/event-bus";
export default {
methods: {
sendMsg() {
EventBus.$emit("aMsg", "来自A页面的消息");
this.$bus.$emit("nameOfEvent", {
name: "shy"
});
}
}
// destroyed() {
// EventBus.$emit("aMsg", "来自A页面的消息destroyed");
// this.$bus.$emit("nameOfEvent", {
// name: "shy-destroyed"
// });
// }
};
</script>
b.vue
<template>
<p>BBB页面，A发送来的消息：{{ msg }}</p>
</template>
<script>
import { EventBus } from "@assets/utils/event-bus";
export default {
data() {
return {
msg: "defaultMsg"
};
},
created() {
EventBus.$on("aMsg", msg => {
// A发送来的消息
this.msg = msg;
});
this.$bus.$on("nameOfEvent", $event => {
console.log($event);
});
}
};
</script>
插件挂载方式
1、定义一个统一事件管理器
// 插件挂载方式
import Vue from 'vue'
// Bus 就是一个Vue对象，因此Vue.$on: 监听`当前实例`上的自定义事件
let Bus = new Vue()
let install = (Vue) => {
Vue.prototype.$bus = Bus
}
export default { install }
2、引用EventBus
import Vue from 'vue'
import Bus from '@/assets/js/eventBus'
Vue.use(Bus)
移除事件监听者
如果想移除事件的监听，可以像下面这样操作：
import {
eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})
你也可以使用 EventBus.$off('aMsg') 来移除应用内所有对此某个事件的监听。或者直接调用 EventBus.$off() 来移除所有事件频道，不需要添加任何参数 。
知识点
Vue.$on 监听 当前实例 上的自定义事件。
事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
Vue.$off 移除自定义事件监听器。
vm.$off( [event, callback] )
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。
发布订阅模式主要包含哪些内容呢?
- 发布函数，发布的时候执行相应的回调
- 订阅函数，添加订阅者,传入发布时要执行的函数,可能会携额外参数
- 一个缓存订阅者以及订阅者的回调函数的列表
- 取消订阅(需要分情况讨论)
自己实现一个 Observer 对象:
//用于存储订阅的事件名称以及回调函数列表的键值对
function Observer() {
this.cache = {}
}
//key:订阅消息的类型的标识（名称），fn收到消息之后执行的回调函数
Observer.prototype.on = function (key,fn) {
if(!this.cache[key]){
this.cache[key]=[]
}
this.cache[key].push(fn)
}
//arguments 是发布消息时候携带的参数数组
Observer.prototype.emit = function (key) {
if(this.cache[key]&&this.cache[key].length>0){
var fns = this.cache[key]
}
for(let i=0;i<fns.length;i++){
Array.prototype.shift.call(arguments)
fns[i].apply(this,arguments)
}
}
// remove 的时候需要注意，如果你直接传入一个匿名函数fn，那么你在remove的时候是无法找到这个函数并且把它移除的，变通方式是传入一个
//指向该函数的指针，而 订阅的时候存入的也是这个指针
Observer.prototype.remove = function (key,fn) {
let fns = this.cache[key]
if(!fns||fns.length===0){
return
}
//如果没有传入fn，那么就是取消所有该事件的订阅
if(!fn){
fns=[]
}else {
fns.forEach((item,index)=>{
if(item===fn){
fns.splice(index,1)
}
})
}
}
//example
var obj = new Observer()
obj.on('hello',function (a,b) {
console.log(a,b)
})
obj.emit('hello',1,2)
//取消订阅事件的回调必须是具名函数
obj.on('test',fn1 =function () {
console.log('fn1')
})
obj.on('test',fn2 = function () {
console.log('fn2')
})
obj.remove('test',fn1)
obj.emit('test')
为什么会使用发布订阅模式呢? 它的优点在于:
- 实现时间上的解耦(组件,模块之间的异步通讯)
- 对象之间的解耦,交由发布订阅的对象管理对象之间的耦合关系.
网友评论