手把手带你实现Vue源码中的发布订阅模式

数码系统

相机 win10

测评 win11

手机智车

华为 Tesla

小米理想

苹果蔚来

游戏软件

LOL 抖音

原神微信

当前位置：首页

前端开发

手把手带你实现Vue源码中的发布订阅模式

热心网友时间：2026-07-18

转载

发布订阅模式通过调度中心中转信息，实现发布者与订阅者解耦。Vue响应式系统结合数据劫持与发布订阅，核心角色包括订阅者、调度中心和发布者。代码示例展示了典型实现：订阅者注册事件到调度中心，发布者触发事件时执行对应回调。

今天聊聊发布订阅模式。这玩意儿其实挺生活化的——你微信上关注了一堆公众号，哪天这些号更新了，微信就会弹个通知告诉你。说白了，这就是发布订阅的一种简单写照。

关键点在于：发布者和订阅者之间并不直接打交道，而是通过一个调度中心来中转信息。一个事件可以被多个订阅者监听，一个订阅者也能同时关心多个不同的事件。

手把手带你实现发布订阅模式--Vue源码

Vue的响应式系统，本质上就是数据劫持跟发布订阅模式结合后的产物。想真正理解Vue的设计思路，绕不开对这个模式的理解。

整个模式里，有三个核心角色：

订阅者：把自己想监听的事件，提前登记到调度中心里。
调度中心：当发布者通知有任务时，由它负责唤起所有相关的订阅者（也就是执行他们留下的代码）。
发布者：把任务或事件，推送到调度中心。

理论说太多容易晕，直接看代码实现。

 复制代码html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        class Publish {
            constructor() {
                // 调度中心，订阅者把自己要订阅的东西注册到这里
                // this.events = {
                //      event1: [fn1, fn2, fn3]
                //      event2: [fn1, fn2]
                //}
                this.events = {}
            }            // 订阅，订阅者把把事件注册到调度中心
            $on(type, fn) {
                if (!this.events[type]) {
                    this.events[type] = []
                }                this.events[type].push(fn)
            }            // 发布，通过调度中心发布
            $emit(type) {
                if (this.events[type]) {
                    const args = Array.prototype.slice.call(arguments, 1)
                    this.events[type].forEach(fn => {
                        fn(...args)
                    });
                }
            }
        }        const eventHub = new Publish()        // 订阅：把事件注册到调度中心
        eventHub.$on('sum', function() {
            const total = [...arguments].reduce((x, y) => x + y)
            console.log(total)
        })        // 发布：如果有人订阅，那么就执行注册的代码
        eventHub.$emit('sum', 1, 2, 3)
    script>
body>
html>