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

article/2025/9/24 15:43:35

什么是观察者模式?

例如:抖音上的小杨哥,当小杨哥在抖音开启直播时,会自动通知所有的粉丝。 小杨哥:直播间开播了! 

小杨哥为目标   抖友为观察者

目标应该具备

  • 收集观察者
  • 删除观察者
  • 通知观察者
  • <!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 XYG {constructor(name, age) {this.name = namethis.age = agethis.douyou = []}add(douyou) {// 收集观察者this.douyou.push(douyou)}// 通知观察者notify() {this.douyou.forEach(item => {console.log(item)item.update(this.name + '冷酸灵牙膏秒杀16件,仅39.99!')})}}// 目标const xyg = new XYG('小杨哥', 18)console.log(xyg)class douyou {constructor(name, age) {this.name = namethis.age = age}update(msg) {console.log(this.name + '接收通知' + msg)}}// 观察者const douyou1 = new douyou('抖友1号', 19)const douyou2 = new douyou('抖友2号', 20)const douyou3 = new douyou('抖友3号', 20)// 收集依赖xyg.add(douyou1)xyg.add(douyou2)xyg.add(douyou3)// 通知xyg.notify()console.log(xyg.douyou)</script>
    </body></html>

    vue中的理解。 data中有三个对象人的data:{person1:{name:'张三'},person2:{name:'李四'},person3:{name:'王五'},} ,需求将三个人的名字都追加一个1,

this.person1.name="张三1" 

this.person2.name="李四1"

this.person3.name="王五1"

此时vue会在Object.defineproperty的get函数中收集person123的变化信息。并在set函数中通知vue的生命周期update函数执行渲染。

update函数会将原来dom的节点和修改后的节点转换成虚拟节点(js对象)进行最小代价的计算(diff),最终使用patch函数渲染到页面上。


http://chatgpt.dhexx.cn/article/dKjWJVDN.shtml

相关文章

c++之观察者模式

一&#xff0c;观察者模式 随着交通信号灯的变化&#xff0c;汽车的行为也随之而变化&#xff0c;一盏信号灯可以指挥多辆汽车。 观察者模式是用于建立一种对象与对象之间的依赖关系&#xff0c;一个对象发生改变时将自动通知其他对象&#xff0c; 其他对象将相应作出反应&…

springBoot 观察者模式

观察者设计模式 jie神说用订阅和发布来理解更好&#xff0c;我想了一下是的 为什么呢&#xff1f;因为监听器这个名词听起来是一个主动的&#xff0c;可实际监听器是一个被动的玩意 比如我们事件源发布一个事件&#xff0c;然后监听器订阅了这个事件就能做出动作。 里面涉及到…

设计模式之观察者模式

1. 观察者模式概述 我们不断提到软件系统解耦的重要性&#xff0c;当减少依赖关系时&#xff0c;我们可以扩展、开发和测试不同的模块&#xff0c;而无需了解其他模块的实现&#xff0c;只需要知道它们实现的抽象。尽管如此&#xff0c;在实践中&#xff0c;模块是需要协同工作…

观察者模式及应用场景

观察者模式&#xff08;Observer Design Pattern&#xff09;,也叫做发布订阅模式&#xff08;Publish-Subscribe Design Pattern&#xff09;、模型-视图&#xff08;Model-View&#xff09;模式、源-监听器&#xff08;Source-Listener&#xff09;模式、从属者&#xff08;D…

设计模式:观察者模式

1.1 观察者模式 1.1.1 观察者模式的引入案例 天气预报在现实生活中的有着非常广泛的应用&#xff0c;在即将发生灾害天气时&#xff0c;专用的气象广播电台可用一定波长的信号&#xff0c;使这种收音机自动开启呼叫&#xff0c;这样&#xff0c;入睡的人也能被其信号唤醒&…

《设计模式》之观察者模式

一、什么是观察者模式 观察者模式又称为 发布-订阅模式&#xff0c;定义了对象之间一对多依赖关系&#xff0c;当目标对象(被观察者)的状态发生改变时&#xff0c;它的所有依赖者(观察者)都会收到通知。一个观察目标可以对应多个观察者&#xff0c;而这些观察者之间没有相互联…

kotlin——观察者模式

ObserverManager类&#xff1a; /*** 1、观察者模式管理类*/ class ObserverManager : SubjectListener {/*** 观察者集合*/private val list ArrayList<ObserverListener>()override fun add(observerListener: ObserverListener) {// 加入队列list.add(observerListe…

观察者模式及其应用场景

观察者模式&#xff08;Observer Design Pattern&#xff09;,也叫做发布订阅模式&#xff08;Publish-Subscribe Design Pattern&#xff09;、模型-视图&#xff08;Model-View&#xff09;模式、源-监听器&#xff08;Source-Listener&#xff09;模式、从属者&#xff08;D…

C++观察者模式

C观察者模式 当对象间存在一对多关系时&#xff0c;则使用观察者模式&#xff08;observer pattern&#xff09;。比如&#xff0c;当一个对象被修改时&#xff0c;则会自动通知发依赖它的对象。观察者模式属于行为型模式。 Observer模式是应用最多、影响最广的设计模式之一&am…

Android开发模式之观察者模式

目录 一、定义 1.观察者模式 2.UML类图 3.观察者模式中的角色 二、使用场景 三、简单实现 四、观察者模式在java.util包中的应用 五、观察者模式在Button中的应用 六、观察者模式在ListView中的应用 七、观察者模式的优缺点 观察者模式的优点 观察者模式的缺点 一、…

java设计模式-观察者模式

观察者模式介绍&#xff1a; 观察者模式&#xff08;有时又被称为发布/订阅模式&#xff09;是软件设计模式的一种。在此种模式中&#xff0c;一个目标对象管理所有相依于它的观察者对象&#xff0c;并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法…

观察者模式(Observer) 简介

一, 观察者模式(Observer) 的定义 观察者模式: 定义了一种 1对多 的依赖关系, 让多个观察者对象同时监听1个主题对象. 这个主题对象在状态发生变化时, 会通知所有的观察者对象, 使它们能够同时更新自己. 稍微解释一下 这个1 对多 的依赖关系. 1对多 这个关键词我们常常在DB …

观察者模式

第23章 观察者模式 一、观察者模式的基本介绍 观察者模式(Observer Pattern)&#xff1a;定义对象间的一种一对多依赖关系&#xff0c;使得每当一个对象状态发生改变时&#xff0c;其相关依赖对象皆得到通知并被自动更新。 观察者模式又叫做发布-订阅&#xff08;Publish/Subsc…

观察者模式(Observer Pattern)

一、什么是观察者模式 观察者模式是一种对象行为模式。它定义对象间的一种一对多的依赖关系&#xff0c;当一个对象(目标对象)的状态发生改变时&#xff0c;所有依赖于它的对象(观察对象)都得到通知并被自动更新。特点&#xff1a;被观察者和观察者一般是一对多的关系&#xf…

设计模式之观察者模式详解(附应用举例实现)

文章目录 1 观察者模式介绍2 观察者模式详解2.1 观察者模式结构2.2 观察者模式实现2.3 观察者模式应用举例 3 观察者模式与MVC 1 观察者模式介绍 “红灯停&#xff0c;绿灯行”。在这个过程中&#xff0c;交通信号灯是汽车的观察目标&#xff0c;而汽车则是观察者。随着交通信…

23种设计模式——观察者模式

目录 观察者模式&#xff08;Observer&#xff09; 理解 UML图 优缺点 观察者模式在各语言中的支持 Java C# 实例 小丑表演 办公室摸鱼 投资者与股票 观察者模式&#xff08;Observer&#xff09; 本质&#xff1a;触发联动 目标对象变化时&#xff0c;会通知所有登…

设计模式(五)观察者模式

相关文章 设计模式系列 1.观察者模式模式简介 定义 观察者模式&#xff08;又被称为发布-订阅&#xff08;Publish/Subscribe&#xff09;模式&#xff0c;属于行为型模式的一种&#xff0c;它定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对…

Win64 驱动内核编程-28.枚举消息钩子

枚举消息钩子 简单粘贴点百度的解释&#xff0c;科普下消息钩子&#xff1a; 钩子是WINDOWS中消息处理机制的一个要点&#xff0c;通过安装各种钩子&#xff0c;应用程序能够设置相应的子例程来监视系统里的消息传递以及在这些消息到达目标窗口程序之前处理它们。 钩子的种类很…

Anti 消息钩子注入

MSDN上对消息钩子的描述&#xff1a; The SetWindowsHookEx function installs an application-defined hook procedure into a hook chain. You would install a hook procedure to monitor the system for certain types of events. These events are associated either wit…

注入(4)--消息钩子注入(SetWindowsHookEX)

SetWindowsHookEx函数是微软提供给程序开发人员进行消息拦截的一个API。不过,他的功能不仅可以用作消息拦截,还可以进行DLL注入。 SetWindowsHookEx原型声明如下: WINUSERAPI HHOOK WINAPI SetWindowsHookExW(_In_ int idHook,_In_ HOOKPROC lpfn,_In_opt_ HINSTANCE hmod,…