深入理解Vue $on、$emit、$off

缘起

遇到一个问题(vue2.x版本下):

A组件、D组件需要通信,考虑到嵌套的层级比较多,所以采用了eventBus的方式传递数据。

D组件因为某些操作触发了组件更新后,无法再成功监听到来自A组件传递的数据。

排查发现,问题出在了D组件移除事件的调用方式上,上述的写法中,只提供了事件,Vue会移除该事件所有的监听器

修改D组件监听及移除事件的方式,问题成功解决。

所以在这个问题的场景里,移除事件监听器时,需要提供回调函数,只移除这个回调的监听器,才能保证下一次更新组件时能正常监听到事件。

回顾

查阅Vue官方文档(Vue2.x),回顾下Vue提供的三个API的功能特性:

触发事件

vm.$emit( eventName, [...args] )

触发当前实例上的事件,eventName为事件名称,args为需要传递的参数、数据。

监听事件

vm.$on( event, callback )

监听当前实例上的自定义事件, event事件名需与触发事件时定义的事件名相同; callback为回调函数,在里面可以执行监听到事件后需要执行的操作。

移除事件

vm.$off( [event, callback] )

移除自定义事件监听器。这里提供了三种使用场景:

1.不提供参数,则移除所有的事件监听器;

bash 复制代码
vm.$off();

2.如果只提供了事件,则移除该事件所有的监听器;

bash 复制代码
vm.$off(eventName);

3.如果同时提供了事件与回调,则只移除这个回调的监听器。

bash 复制代码
vm.$off(eventName, callback);

深入

查看下Vue(这里基于2.7.14)源码中对上述三个API的实现方式:

$emit

  • 遍历回调函数列表
  • 调用每个回调函数并传递参数

$on

  • 如果传入的事件是数组,则遍历数组,并对每个子项调用$on
  • 如果传入的是单个事件:
    • 如果传入的事件不存在,创建一个新数组,并添加回调函数
    • 如果传入的事件已经存在,则将新传入的回调函数添加到事件数组列表中

$off

  • 如果传入的事件是数组,则遍历数组,并对每个子项调用$off
  • 判断是否传入了指定的回调函数,如果没传入,则移除所有监听器。若传入了,则移除指定回调的监听器

模拟实现事件总线

kotlin 复制代码
class Bus {
    constructor() {
        this.busEvent = {};
        this.$on = (name, func) => {
            if (this.busEvent[name] ) {
                this.busEvent[name][Symbol.for(func)] = func;
            } else {
                this.busEvent[name] = {}
                this.busEvent[name][Symbol.for(func)] = func;
            }
        }
        this.$off = (name, func) => {
            if (func) {
                this.busEvent[name][Symbol.for(func)] = undefined
            } else {
                this.busEvent[name] = undefined
            }
        }
        this.$emit = (name) => {
            if (!this.busEvent[name]) return
            Object.getOwnPropertySymbols(this.busEvent[name]).forEach(el => {
                console.log(this.busEvent[name][el], 'hihihi')
                if (this.busEvent[name][el] !== undefined) this.busEvent[name][el]()
            })
        }
    }
}

const bus = new Bus()
bus.$on('test', () => {
    console.log('func1111')
})
let func2 = () => {
    console.log('func222222')
}

bus.$emit('test')
bus.$on('test', func2)
bus.$off('test', func2)
// bus.$off('test', () => {
//     console.log('func222222')
// })

Vue3.x中的变更

在Vue3.x版本下,$on$off$once 实例方法已被移除,组件实例不再实现事件触发接口。$emit 仍然包含于现有的 API 中,因为它用于触发由父组件声明式添加的事件处理函数

这意味着在Vue3.x版本中,Vue不再支持使用事件总线的方式进行组件间的通信,需要借助第三方的库实现。例如 mitttiny-emitter

另外,作者也表示,在绝大多数情况下,不鼓励使用全局的事件总线在组件之间进行通信。

可以使用一些替代方案。例如provide / injectPinia

相关推荐
kyle~6 小时前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light606 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏7 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
一只小风华~9 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟9 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
iCoding9110 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou3311 小时前
使用 Service Worker 限制请求并发数
前端
张可爱11 小时前
20251017-Vue2八股文整理(上篇)
前端
FanetheDivine11 小时前
ts中如何描述一个复杂函数的类型
前端·typescript
lightgis11 小时前
chrome中的axure插件提示无法不受支持
前端·chrome