关于vue中发布-订阅模式的原理浅析

作为一个vue开发者，在学习和使用vue的过程中都会接触到自定义事件，其中两个方法就是$on和$emit，接下来通过简单的实现来浅析下其中的实现原理

vue的实现

vue官网地址
接下来进行简单的分析，在vue的自定义事件中$on可以绑定多个不同或相同名称的事件，所以就要把$on注册的事件放到对象中去，并且该事件的处理函数是在一个数组中保存，当$emit触发某个事件时，会执行这个事件中的多个事件处理函数
如下

//订阅多个事件
$on("change",fn1)
$on("change",fn2)
$on("click",fn3)
$on("click",fn4)
//其形式如下
{
"click":[fn3,fn4],
"change":[fn1,fn2]
}
//当$emit发布事件时会传入事件名称，然后该事件下的所有事件处理函数会被执行
$emit('click');//会执行fn3()，fn4()

发布定于模式的简单实现

class eventEmiter {
  constructor(){
    //this.subs = {}
    //这样写可以提高性能，没有继承任何原型方法，原型链上没有上一层
    this.subs = Object.create(null)
  }
  $on(eventType,handler) {
    this.subs[eventType] = this.subs[eventType] || [];
    this.subs[eventType].push(handler)
  }
  $emit(eventType) {
    this.subs[eventType].forEach(handler => {
      handler();
    })
  }
}
//进行测试
const em = new eventEmiter()
$on('add',()=>{
  console.log('add1');
})
$on('add',()=>{
  console.log('add2')
})
$emit('add')

结果如下

发布-订阅.png

最后，比较下Object.create(null)和Object.create({})的差别

因为自己也是在慢慢学习vue中的原理性的东西，如有错误，也希望能够给我指出，也好及时纠正

年华如果虚度，生命将毫无意义