js设计模式和vue_js设计模式结合vue-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40986534/article/details/136247826

本文分析了观察者模式和发布订阅模式的区别，前者是直接依赖，如Vue的watch，后者通过事件总线实现松耦合，如Vue2的EventBus。作者以实际代码示例说明两者在处理一对多关系时的应用和区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

观察者与发布订阅区别：----个人理解，仅供参考

一个有中间商（发布订阅模式），一个没有中间商（观察者模式），两者都是一对多的关系。一对多，就是一个人发布，会通知（触发）多个（所有）订阅他的人。

观察者模式：有观察者A 和目标对象B， A 添加到 B的事件数组队列中，B状态改变，会通知调用所有A的方法。 相当于vue的watch函数，完全取决于目标对象的状态变化以及影响了谁。

发布订阅模式：有订阅者A 、发布者B、事件总线(中心)C， A订阅C的事件，B发布C的事件。相当于Vue的数据劫持原理：Object.defineProperty() get时订阅依赖 set时发布依赖：A和B相对独立，事件管理交给C。还有Vue2的Event bus。

一，观察者

vue中的观察者模式_vue 观察者模式是什么-优快云博客

设计模式：解决一类问题的最优解。

定义：是一种一对多的依赖关系。多个观察者监听一个对象。当此对象的状态发生变化，会通知所有观察者做事。

理解：

观察者：一个函数（做事）

事件：一个标识符

描述：被观察者（事件）状态变化，观察者做出响应，做动作（如更新dom）

使用：

图片引用《黑马js设计模式教程》

二、发布订阅

图片引用《黑马js设计模式教程》

const Pubsub = {
    list: {},
    subscribe(ename, fn) {
        if(this.list[ename]) {
            this.list[ename].push(fn)
        } else {
            this.list[ename]= [fn]
        }
    },
    publish() {
        let args = arguments
        const ename = Array.prototype.shift.call(args)
        const fns = this.list[ename]
        if(fns && fns.length > 0) {
            fns.foreach(fn=> {
                // 把this指向调用者
                Reflect.apply(fn, this, args)
            })
        } else {
           return false
        }
    },
    unsubscribe(ename) {
        Reflect.deleteProperty(this.list, ename)
    }
}

// eg:在vue获取值的时候，订阅 添加依赖
Pubsub.subscribe('依赖1', () => {
    console.log('更新1')
})
Pubsub.subscribe('依赖2', () => {
    console.log('更新2')
})

// eg:在vue设置值的时候，发布 更新依赖
Pubsub.publish('依赖1')
Pubsub.publish('依赖2')