Vue中的发布订阅分析（Vue2/3中的 emit 实现）

Vue中的发布订阅模式分析

模块：instanceEventEmiiter.ts（在下方有简单实现和解析）

在Vue3中，已经取消了对这个模块的引用，故而不再支持 $on、$off、$once相关的方法，不过还是可以对进行学习和借鉴，运用到工作中。

1. Vue3中的简单实现

   Vue3中 emit 的实现相对 Vue2 来说更加简单一些了，他是通过 h函数 的第二个参数来实现的

   实现 Child 组件

   const { createApp, h } = Vue
   // 创建一个子组件
   const Child = {
     setup(props, ctx) {
       return {
         buttonClick() {
           // 源码中挂载 emit 的函数：createComponentInstance
           // 挂载代码：instance.emit = emit.bind(null, instance)
           // emit函数接受3个参数： emit(instance, event, ...rawArgs)
           // 其中 instance 在挂载到 instance 的时候默认传入了
           // ctx.emit('test') 相当于  ctx.emit('当前Vue实例', 'test', 123)
           // emit函数中会对 on开头、 Once 结尾等关键字符串进行解析
           // 然后从 instance.vnode.props 中去获取对应的回调函数
           // 然后执行 回调函数，此次发布订阅流程也就完成了
             
           // 执行 emit 方法发布一个 test 事件
           ctx.emit('test', 123)
         }
       }
     },
     render(e) {
       return h('button', {
         onClick: this.buttonClick
       }, '派发Emit')
     }
   }
   

   实现App组件

   const App = {
     render(e) {
       // h函数返回一个 vnode
       // 当 h 函数的第二个参数是一个 Object，并且不是一个 VNode 时
       // vnode.props 就是 h 函数的第二个参数值
       return h(
         'div', {}, [
           // 引用 Child 组件，并且传入 onTest 方法
           h(Child, {
             // 监听 test 事件 vnode.props = { onText: Funtion }
             onTest(e) {
               console.log('emit test event!', e)
             }
           })
         ]
       ) 
     }
   }
   
   createApp(App).mount(document.getElementById('emitApp'))
   

2. instanceEventEmiiter 实现代码（简易 JS 版本）

   · 其中像 WeakMap对象、getRegistry方法的运用，及对与 eventName 为数组的处理逻辑还是值得学习的

   · 在工作中可以在 Vue3 的项目中实现一个 Emiiter 模块，代替 Vue2中的 bus 实现，用于全局事件通讯

   // 发布订阅仓库
   // 数据结构类似： { Instance, Object<[event: string]: Function[] | undefined> }
   const eventRegistryMap = new WeakMap()
   
   /**
    * 根据 instance 进行事件注册
    * @param {*} instance 当前 Vue 实例对象
    * @returns 当前事件对象s
    */
   function getRegistry(instance) {
     // 从 map 中获取事件对象
     let events = eventRegistryMap.get(instance)
   
     if(!events) {
       // 若没有注册过，则进行新注册
       eventRegistryMap.set(instance, (events = Object.create(null)))
     }
   
     // 返回 实例的事件对象
     return events
   }
   
   /**
    * 添加订阅
    * @param {*} instance 实例
    * @param {*} eventName 事件名称  string | string[]
    * @param {*} fn 回调函数 function
    */
   function on(instance, eventName, fn) {
     if(Array.isArray(eventName)) {
       // 处理 eventName 为 数组的情况
       //（如：this.$on(['tab:click', 'tab:change'], () => {})）
       eventName.forEach(c => on(instance, c, fn))
     } else{
       // 获取 instance实例 的事件对象的
       let events = getRegistry(instance)
       // 将回调函数添加到事件对象的 回调函数 列表中
       (events[eventName] || (events[eventName] = [])).push(fn)
     }
   }
   
   /**
    * 发布订阅
    * @param {*} instance 实例
    * @param {*} eventName 事件名称  string | string[]
    * @param {*} args 回调函数 function
    */
   function emit(instance, eventName, args) {
     // 获取 instance实例 中事件名称为 eventName 的回调函数列表
     const cbs = getRegistry(instance)[eventName]
     
     if(cbs) {
       // 在 Vue 源码中，这里是通过 callWithAsyncErrorHandling 函数统一进行执行的
       // 目的是为了统一收集回调函数中的异常
   
       // 执行回调函数（这里我们直接调用了）
       cbs.forEach(fn => {
         fn.apply(instance.proxy, args)
       })
     }
   }
   
   /**
    * 添加订阅（只触发一次）
    * @param {*} instance 实例
    * @param {*} eventName 事件名称  string | string[] 
    * @param {*} fn  回调函数 function
    * @returns 
    */
   function once(instance, eventName, fn) {
     // 由于只需要执行一次，这里对 回调 函数进行了包装
     const wrapped = (...args) => {
       // 执行回调是我们需要吧他删除掉
       off(instance, eventName, fn)
       // 执行回调函数
       fn.call(instance.proxy, ...args)
     }
   
     // 在包装函数上增加一个 fn属性，用于删除这个回调函数时做匹配
     wrapped.fn = fn
     // 添加到 订阅 列表中
     on(instance, eventName, wrapped)
     return instance.proxy
   }
   
   /**
    * 移除订阅事件
    * @param {*} instance 实例
    * @param {*} eventName 事件名称  string | string[]
    * @param {*} fn 回调函数 function
    * @returns 
    */
   function off(instance, eventName, fn) {
     if(Array.isArray(eventName)) {
       // 处理 eventName 为 数组的情况
       eventName.forEach(c => off(instance, c, fn))
     } else {
       const vm = instance.proxy
       const events = getRegistry(instance)
       const cbs = events[eventName]
       // 事件 订阅列表 为空时提前处理
       if(!cbs) {
         return vm
       }
       
       // 没有传入回调函数，直接将 事件订阅列表 清空即可
       if(!fn) {
         events[eventName] = undefined
         return vm
       }
       
       // 过滤掉需要清除的回调，重新赋值给这个事件的 订阅列表
       events[eventName] = cbs.filter(c => !(c === fn))
     }
   }
   

成功之前我们要做应该做的事情，成功之后我们才可以做喜欢做的事情