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

最新推荐文章于 2024-09-04 08:49:07 发布

@皮皮榴

最新推荐文章于 2024-09-04 08:49:07 发布

阅读量656

点赞数

分类专栏： Vue 笔记文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_39357822/article/details/119427328

版权

笔记同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

Vue

33 篇文章 0 订阅

订阅专栏

本文详细介绍了发布/订阅模式的概念，包括发布者、订阅者和信号中心的角色。以Vue的自定义事件为例，阐述了$on和$emit的工作原理，并通过代码模拟实现了这一机制。此外，还探讨了观察者模式及其与发布/订阅模式的区别。内容涵盖事件通信在Vue组件间如何进行，以及如何通过简单的类实现事件触发器。

摘要由CSDN通过智能技术生成

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

发布/订阅模式

发布/订阅模式
- 订阅者
- 发布者
- 信号中心
我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”（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>