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

作者: 叫维特的少年 | 来源:发表于2020-11-10 15:52 被阅读0次

Vue响应式原理
关于vue中发布-订阅模式的原理浅析
vue2
模拟 Vue 自定义事件（订阅发布模式）
发布订阅模式
vue面试知识点
Vue MVVM 原理实现
Vue 学习笔记-双向绑定原理及实现
Vue 速记
手写 Vue Router、手写响应式实现、虚拟 DOM 和 D

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

vue的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 自定义事件</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>  
    // Vue 实例
    const app = new Vue()
    // 订阅事件
    app.$on("click", () => {
      console.log("click1")
    })
    app.$on("click", () => {
      console.log("click2")
    })
    // 发布事件
    app.$emit("click")
  </script>
</body>
</html>

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')

结果如下