Vue中$on和$emit的实现原理分析
Vue中发布订阅模式
在Vue中采用了发布订阅模式，典型的兄弟组件间的通信$on和$emit
发布订阅模式：（订阅者、发布者、信号中心）
一个发布者$emit发布一个事件到信号中心 eventBus ，订阅者们 $on 通过信号中心收到该事件，进行处理
在这里模拟一个自定义事件 $on和$emit事件
class EventBus{
constructor(){
// 1.处理事件对应的处理函数
this.sub = {}
}
$on(event,fn){
if(!this.sub[event]){
// 2.判断sub是否已经存在该事件了，没有的话就赋值一个数组，用来存储触发函数
this.sub[event] = []
}
// 3.将函数push到对应的事件中
this.sub[event].push(fn)
}
$emit(event){
if(this.sub[event]){
this.sub[event].forEach(fn=>{
fn() //4.执行对应事件中的处理函数
})
}
}
}
// 信号中心
const vm = new EventBus()
// 订阅事件
vm.$on('click',()=>{console.log('触发了click事件')})
vm.$on('change',()=>{console.log('触发了change事件')})
// 发布订阅
vm.$emit('click')
vm.$emit('change')
$emit和$on用法深挖
俗称的 e m i t 和 emit和 emit和on就是消费和定义，咱们在代码中讲解
<body>
<div id="app">
<button @click="add">测试</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message:'ok'
},
created() {
this.$on('my_event',this.datalist)
},
methods: {
datalist(e){
console.log(this.message,e);
},
add(){
this.$emit('my_event','hello wu')
}
}
});
</script>
</body>
首先剖析一下$on的原理实现
先在create加个断点
我们会发现他会跳到on的源码中
我们传入的参数是两个，第一个是我们事件的名称，第二个是我们事件处理方法对应的event和fn
- 首先他把this传给vm
- 然后判断event是不是一个数组，如果是个数组他就会以循环的方式进行赋值，继续执行on的迭代方法，如果不是数组进入else的逻辑判断去找他是不是包含了event，如果不包含他会自己创建个event设置成空数组，把新建的处理函数push进去，这说明我们在定义个事件的时候，是可以同时为一个事件定义多个执行方法，最后找到定义的方法并返回
- 定义第二种方法看代码
var vm = new Vue({
el: '#app',
data: {
message:'ok'
},
created() {
this.$on('my_event',this.datalist)
this.$on('my_event',this.datalist2)
},
methods: {
datalist(e){
console.log(this.message,e);
},
datalist2(e){
console.log('我是第二种方法',e);
},
add(){
this.$emit('my_event','hello wu')
}
}
});
说明定义多个执行方法也是没问题的
有一点要记住先定义的先触发
还有一个点他是可以是个数组，在不同的事件绑定同一个处理方法，如下代码
var vm = new Vue({
el: '#app',
data: {
message:'ok'
},
created() {
this.$on(['my_event','my_event2'],this.datalist)
console.log(this._events);
// this.$on('my_event',this.datalist2)
},
methods: {
datalist(e){
console.log(this.message,e);
},
datalist2(e){
console.log('我是第二种方法',e);
},
add(){
this.$emit('my_event2','hello wu')
}
}
});
换成第二个数组他还是可以实现
分析$emit
先打个断点
1.emit的源码
2.关键的一步：先通过名称改成小写后然后直接从我们vue实例下划线events这个对象当中拿出事件对应的方法，如果找不到什么都不做，直接返回回来，找的话，第一步先判断cbs的长度打不打与1，因为他有可能是个数组，多个处理函数如果大于一就变成了一个数组，如果等于一的话直接返回cbs.
第二步他对arguments做了处理把后面的参数变成数组，第一个不要了 ，因为事件名称他用完了，紧接着他对cbs做了个循环，
这个函数是捕获处理异常，执行try catch，所以说如果执行emit出了错误他不会崩溃，会抛出错误，这个地方做的还不赖 最后把res返回
总结
可以通过源码去理解事半功倍噢
通过源码分析我们会知道on方法在定义的时候他可以定义多个事件，也可以为同个事件绑定多个处理函数，在定义中还可以是数组
在emit当中进行trycate的处理，所以我们抛出异常的时候我们不会中断整个程序而崩溃
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue中如何使用唯一标识uuid(uuid.v1()-时间戳、uuid.v4()-随机数)
这篇文章主要给大家介绍了关于vue中如何使用唯一标识uuid(uuid.v1()-时间戳、uuid.v4()-随机数)的相关资料,当使用Vue.js生成UUID时,我们可以使用uuid库来帮助我们生成通用唯一标识符(UUID),需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue常用组件之confirm用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本篇文章主要介绍了vue-cli扩展多模块打包的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要给大家介绍了关于uniapp微信小程序axios库的封装及使用的相关资料,Axios是一个基于promise网络请求库,作用于node.js和浏览器中axios-miniprogram-adapteraxios的小程序适配器,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了vue组件间传值的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了Vue2.0 ES6语法降级ES5的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue-router的导航守卫使用讲解,vue-router提供了许多编程式导航的API，其中最常见的导航API有很多种，本文给大家详细讲解，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了关于vite proxy跨域问题的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue源码学习之双向绑定，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
通过本文给您演示一下如何有效地使用递归组件，我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。下面通过本文给大家分享用 Vue.js 递归组件实现可折叠的树形菜单，需要的朋友参考下吧2017-12-12
最新评论