首页 > 其他分享> > Vue 发布订阅模式、Vue中自定义事件的实现机制

Vue 发布订阅模式、Vue中自定义事件的实现机制

2021-08-06 21:05:34 作者：互联网

发布订阅模式和观察者模式

发布/订阅模式

发布/订阅模式
- 订阅者
- 发布者
- 信号中心
我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”（publish）一个信号，其他任务可以向信号中心“订阅”（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”（publish-subscribe patten）
Vue中的自定义事件、Node中的事件机制都是基于发布/订阅模式的。
Vue的自定义事件
·- 通过$on注册事件，在特定的时间通过$emit触发事件

let vm = new Vue()
vm.$on('dataChange', () => {
 console.log('dataChange')
})
vm.$on('dataChange', () => {
 console.log('dataChange1')
})
vm.$emit('dataChange')

兄弟组件通信过程

// eventBus.js
// 事件中心
let eventHub = new Vue()
// ComponentA.vue
// 发布者
addTodo: function () {
 // 发布消息(事件)
 eventHub.$emit('add-todo', { text: this.newTodoText })
 this.newTodoText = ''
}
// ComponentB.vue
// 订阅者
created: function () {
 // 订阅消息(事件)
 eventHub.$on('add-todo', this.addTodo)
}

模拟 Vue 自定义事件的实现

分析$on内部是如何工作的：

$on仅仅是用来注册事件，事件处理函数还没有执行，所以在vm里面需要定义一个内部的变量来存储注册的事件名称以及事件处理函数。注册事件的时候可以给注册多个事件名称，也可以给同一个事件注册多个事件处理函数。存储事件的时候，要记录所有的事件名称以及对应的处理函数，也就是键值对的形式，所以vm内部定义的这个变量是对象的形式。
这个对象应该长这样，暂且称之为事件存储对象：{ 'click': [fn1, fn2], 'change': [fn] }
键：事件名称，值：一个数组，存储事件对应的所有事件处理函数

$emit内部是如何工作的:

$emit用来触发事件，它有一个参数，这个参数就是事件名称，在 $emit内部会通过事件名称，到上述vm里定义的事件存储对象里面找对象的属性，获取到对象的事件处理函数，然后依次执行。

为了简化过程这里不考虑事件处理函数具有参数的情况

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 事件触发器
        class EventEmitter {
            constructor() {
                // { eventType: [ handler1, handler2 ] } => { 'click': [fn1, fn2], 'change': [fn] }
                // Object.create方式创建对象，接收一个参数用来设置对象的原型，传Null 这里的对象不需要原型（可以提升性能）
                this.subs = Object.create(null);
            }
            // 注册事件 - 订阅通知
            $on(eventType, handler) {
                // 往subs对象里存储事件名称和事件处理函数
                this.subs[eventType] = this.subs[eventType] || []
                this.subs[eventType].push(handler)
            }
            // 触发事件 - 发布通知
            $emit(eventType) {
                /**
                 * 根据事件名称，到subs对象中找是否有这个事件，即是否注册了这个事件
                 * 如果有，则遍历事件处理函数的数组，依次执行事件处理函数
                 * 如果没有，则什么都不去要做
                 * */
                if (this.subs[eventType]) {
                    this.subs[eventType].forEach(handler => {
                        handler()
                    })
                }
            }
        }
        // 测试
        var bus = new EventEmitter()
        // 注册事件
        bus.$on('click', function () {
            console.log('click')
        })
        bus.$on('click', function () {
            console.log('click1')
        })
        // 触发事件
        bus.$emit('click')
    </script>
</body>

</html>

在这里插入图片描述

总结

上面的代码是模拟Vue中自定义事件的实现机制，并没有体现发布者和订阅者，只体现了事件中心，发布者/订阅者可以通过Vue兄弟组件船只的方式来体会

标签：订阅,Vue,subs,自定义,事件处理,eventType,事件
来源： https://blog.csdn.net/qq_39357822/article/details/119427328