vue pubsub消息的订阅（subscribe）与发布（publish）（适用与所有的框架，需要使用第三方的js库）

最新推荐文章于 2023-06-22 21:21:57 发布
原创 最新推荐文章于 2023-06-22 21:21:57 发布 · 6.2k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细比较了Vue的全局事件总线与消息订阅发布机制，通过实例展示了如何在Vue中使用pubsub-js实现组件间通信，并介绍了组件销毁时的订阅管理。重点讲解了箭头函数在处理this问题上的应用。

要点：

 

 但是对应vue框架来说,全局事件总线要比消息的订阅与发布要好,因为全局事件总线,是靠vue实现的,不需要去安装别的第三方库了、

对比全局事件总线,其实就是把哪个$bus（x）换成了pubsub

 

订阅指的就是需要数据的

发布则为提供数据的

这边这个模型中,假如a需要收到c的一些数据,也就是说,a时需要数据的也就是订阅,而c是发送数据的也就是发布,

当我们定义订阅的时候,写入一个订阅的名字.然后在加上一个函数,当订阅被接受,也就是订阅的内容被发布,就会调用到这边的test函数,

而在发布时,要写入一个订阅的名字,一定要一样,其中还带着参数,,就可以实现,当订阅demo被发布时,会触发test函数,而函数中的参数就是c组件发过来的数据

然儿在原生js中没有消息的订阅和发布所以我们可以用到js第三方库（pubsub-js）,引用它就可以在任何一个框架上实现消息的订阅和发布

最低0.47元/天 解锁文章
EventBus3.0源码解析——01.使用方法、@Subscribe
boolean的博客
08-12 3978
使用方法 //注册事件 EventBus.getDefault().register(Object subscriber); //注销事件 EventBus.getDefault().unregister(Object subscriber); //发送 EventBus.getDefault().post(Object event); //接收 //这里的方法名不是关键所在，关键是发送的O...
vue的vuex订阅
一只前端小菜鸟
01-02 3129
vue本身内置了watch函数，可以很方便的用来监听数据的变更，包括vuex数据的变更. 但是，这都是基于vue文件的前提下。 如果我们想要在js等其他文件监听vuex数据的变更，该如何进行？ 这里提供两种思路方法，本章介绍第一种，第二种方式请查阅本章：vue的vuex监听 subscribe subscribe(handler: Function): Function 订阅 s...
订阅发布（PubSub）模式的实现以及使用价值
热门推荐
mapbar_front的博客
10-24 1万+
什么是订阅发布模式 订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。 将一个系统分割成一系列相互协作的类有一个很不好的副作用，那就是需要维护相应对象间的一致性，这样会给维护、扩展和重用都带来不便。当一个对象的改变需要同时改变其他对象，而且它不知道具体有多少对象需要改变时，就可以使用订阅...
Redis pub/sub(Publish,Subscribe)
besterector的专栏
06-20 8133
目录 Redis pub/sub(Publish,Subscribe) 1、         Pub/Sub功能 2、         Pub/Sub机制 3、         Pub/Sub 在redis当中的实现 4、         Php-redis扩展测试 5、         Redis pub/sub python客户端测试 6、  
pubsub 发布订阅 sub 发布 pub订阅
gwdgwd123的博客
05-30 892
pubsub.js消息的发布订阅 Arale_zh关注 2019.03.14 17:11字数 142阅读 12评论 0喜欢 0 pubsub.js消息的发布订阅 组件间数据的传递方式 props，一层一层传递 消息的发布订阅，当嵌套层数比较多，可以用此工具库 下载 $ npm install pubsub-js --save 使用 // 导入 impor...
PubSub消息订阅-发布
输入技术、输出想法
06-25 376
PubSub消息订阅-发布 react导入库 npm install pubsub-js --save react 页面引入pubsubjs import PubSub from 'pubsub-js' pubsubjs使用 发送消息：PubSub.publish(名称,参数) 订阅消息：PubSub.subscrib(名称,函数) 取消订阅：PubSub.unsubscrib(名称) pubsubjs源码及使用详情https://github.com/mroderick/PubSubJS React
vue消息的订阅与发布(pubsub)
m0_53620958的博客
09-09 704
vue中消息的订阅与发布
Vue中消息订阅与发布（pubsub）
weixin_45734902的博客
12-05 904
消息订阅与发布（pubsub） 一种组件间通信的方式，适用于任意组件间通信。 使用步骤： 安装pubsub：npm i pubsub-js 引入: import pubsub from 'pubsub-js' 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。 methods(){ demo(data){......} } ...... mounted() { //this.pid = pubsub.subscribe('xxx',this.demo)
Vue笔记 全局事件总线（GlobalEventBus）、消息订阅与发布(PubSub)
qiaoyangla的博客
04-06 746
全局事件总线 1、一种组件间通信的方式，可以实现任意组件间通信 2、安装全局事件总线： new Vue({ ...... beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ...... }) 3、使用事件总线： （1）接收数据：A组件想接收数据，则在A组价中给$bus绑定自定义事件，事件的回调留在A组件自身 methods(){ demo(d...
Vue2.0 消息订阅与发布
yasinawolaopo的博客
12-25 684
Vue2.0 消息订阅与发布
PubSub:PublishSubscribe模式JavaScript实现
05-02
PubSub 模式的Javascript实现。 安装 npm $ npm install PubSub 用法 该库以UMD，CommonJS和ESM格式导出。 您可以通过以下方式导入它： 使用ESM导入语句 import PubSub from 'PubSub' ; 使用CommonJS require语句 const PubSub = require ( 'PubSub' ) ; // If you use a bundler like Webpack, you may need to import it the following way // as it might try to use the ESM module instead of the CommonJS. const PubSub = require ( 'PubSub' ) . default ; 老式浏览器全球
PubSub库（消息的订阅和发布）
HHYZBC的博客
07-12 647
1.一种组件间通信的方式，适用于任意组件间通信2.使用步骤： 导入pubsub 订阅消息 PubSub.subscribe(事件名，事件的回调)订阅方是接受数据的一方PubSub.publish(事件名，提供的数据)注意：接收消息后最好使用 去取消订阅 发布方是提供数据的一方mroderick/PubSubJS： Dependency free publish/subscribe for JavaScript (github.com)https://github.com/m
Pubsub(订阅与发布)、EventBus(事件总线)
qq_45859670的博客
06-09 782
用于组件之间通信，可以实现任意组件的通信发布订阅模式。
PubSub 发布订阅
彳亍
03-10 588
Redis 支持简易的 publish/subscribe （发布/订阅）模式，简称 PubSub。 发布者一旦向某个频道发送消息，订阅了该频道的多个订阅者，都能立马收到消息。但订阅者无法获取在它订阅之前，就已经产生的消息。
Vue-消息订阅与发布(pub/sub)
见证自己学习,成长的记录
06-22 4321
一种组件间通信的方式，适用于任意组件间通信。引入:接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。methods(){......this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息pubsub.publish('xxx',数据)最好在beforeDestroy钩子中，用去取消订阅。
Vue中的消息订阅与发布（pubsub）
李公子的博客
08-09 3254
消息订阅与发布（pubsub） 一种组件间通信的方式，适用于任意组件间通信。 使用步骤： 安装pubsub：npm i pubsub-js 引入:import pubsub from 'pubsub-js' 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。 methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subsc.
pubsub.js（消息订阅）
reaaal的博客
07-28 641
对于vue中多层组件的传值情况，如果多个组件的关系都是父子关系，使用消息订阅的方式可以直接进行跨层传递，而不再需要层层传递。 消息订阅的使用方式 首先下载pubsub npm install pubsub-js 项目中引入pubsub import PubSub from 'pubsub-js' 在mounted中去订阅消息 var token = PubSub.subscribe('MY TOPIC', mySubscriber); 第一个参数：消息，事件的名称 第二个参数：回调函数
Vue消息订阅与发布(pubsub)
qq_45954420的博客
03-07 333
1.一种组件间通信的方式，适用于任意组件间通信 2.使用步骤： (1).安装 pubsub: npm i pubsub-js (2).引入： import pubsub from 'pubsub-js' (3).接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身 ​ //消息订阅第一种方式 ​ mounted() { ​ this.pubId = pubsub.subscribe('hello',(msgName,data)
Vue消息订阅与发布（pubsub）
计算机小白学前端~
05-27 330
1. 一种组件间通信的方式，适用于任意组件间通信 2.使用步骤 ①安装pubsub ：npm i pubsub-js ②引入pubsub：import pubsub from 'pubsub-js' (订阅消息和发布消息的组件都需要引入) ③接收数据 A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。 methods：{ demo(data){......} } ...... mounted() { ...
vue中消息订阅与发布是如何实现的
最新发布
08-12
<think>首先，用户的问题是关于Vue中消息订阅与发布机制的实现原理和方法。用户引用了多个来源，但这些引用是系统提供的参考，我需要基于这些引用构建回答。 关键点来自引用： - [^1]：讨论了Vue2和Vue3中消息订阅与发布模式的核心原理、实践方法及最佳实践。 - [^2]：解释了Vue中的观察者模式（发布订阅模式）如何实现单向数据流。 - [^3]：描述了消息订阅与发布的概念，类似于报纸订阅，A组件订阅消息，B组件发布消息。 - [^4]：深入剖析了发布订阅模式，包括属性变化时触发更新函数。 - [^5]：提供了Vue2中的具体语法，如使用pubsub-js库。 系统指令： - 所有行内数学表达式使用$...$格式。 - 独立公式使用$$...$$格式并单独成段。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，如[^1]。 - 回答结构清晰，逐步解决问题。 - 保证回答真实可靠。 用户的问题：我想了解在Vue中如何实现消息的订阅与发布机制，请问Vue消息订阅与发布实现原理及方法。 我的回答需要覆盖： 1. **实现原理**：基于发布订阅模式（Pub-Sub），Vue中如何实现，包括Vue2和Vue3的区别。 2. **方法**：具体实现步骤，如使用库或内置机制。 3. **结构**：清晰、逐步解释。 4. **生成相关问题**：在末尾添加相关问题。 大纲回答： - **介绍**：简要解释消息订阅与发布模式在Vue中的作用。 - **核心原理**：描述发布订阅模式的工作原理，引用[^2]和[^4]。 - **Vue2中的实现**：使用pubsub-js库，引用[^5]。 - **Vue3中的实现**：Vue3可能使用Composition API或内置机制，引用[^1]。 - **实践方法**：提供代码示例，如使用PubSub库。 - **最佳实践**：注意事项，如取消订阅以避免内存泄漏。 - **总结**：重申重要性。 - **相关问题**：生成3-5个相关问题。 确保语言为中文。 数学表达式：问题中没有明显的数学内容，但如果有，如时间复杂性，需要使用$...$格式。这里可能不需要。 引用标识：在引用具体内容时添加[^n]，例如提到原理时引用[^2]。 代码块：如果需要显示代码，使用代码块格式。 最终回答结构： 1. 引言 2. 实现原理 3. 具体方法（Vue2和Vue3） 4. 代码示例 5. 最佳实践 6. 总结 7. 相关问题</think>### Vue消息订阅与发布机制实现原理及方法 在Vue应用中，消息订阅与发布（Pub-Sub）模式是一种松耦合的通信机制，允许组件间高效传递数据，无需直接依赖关系。它类似于报纸订阅系统：发布者（Publisher）广播消息，订阅者（Subscriber）接收并处理消息。这种模式在Vue中常用于跨组件通信，尤其是在非父子组件场景下。下面我将逐步解释其实现原理、具体方法和最佳实践。 #### 一、实现原理 消息订阅与发布的核心原理基于**观察者模式**（Observer Pattern）。在Vue中，该模式通过一个中央调度器（Dep）管理消息的订阅和发布： - **订阅过程**：组件（订阅者）向中央调度器注册回调函数，指定关注的消息类型（如事件名）。当该消息被发布时，调度器会触发所有关联的回调函数[^2]。 - **发布过程**：组件（发布者）触发消息时，中央调度器遍历订阅列表，执行所有注册的回调函数，并传递数据[^4]。 - **数据流控制**：Vue利用`Object.defineProperty`（Vue2）或`Proxy`（Vue3）监听数据变化。当属性更新时，setter方法通知调度器，调度器发布消息，订阅者接收并更新视图[^2][^4]。这确保了单向数据流，避免直接修改状态。 在Vue2中，该模式常通过第三方库（如`pubsub-js`）实现；Vue3则更倾向于使用内置的`provide/inject`或Composition API，但Pub-Sub模式仍可应用于复杂场景[^1][^3]。其优势是解耦组件，提高代码复用性和可维护性。 #### 二、具体实现方法 以下分Vue2和Vue3介绍常用方法。核心步骤包括：安装库（如需要）、订阅消息、发布消息、取消订阅（避免内存泄漏）。 ##### 1. Vue2中的实现（使用`pubsub-js`库） `pubsub-js`是一个轻量级库，简化了Pub-Sub模式。实现步骤如下： - **步骤1：安装库** 通过npm安装： ```bash npm install pubsub-js ``` - **步骤2：订阅消息** 在组件中导入库，使用`subscribe`方法注册回调函数。消息名（如`'hello'`）需唯一标识事件类型。 ```javascript import pubsub from 'pubsub-js'; export default { mounted() { // 订阅消息，指定消息名和回调函数 this.pubId = pubsub.subscribe('hello', (msgName, data) => { console.log('收到消息:', msgName, data); // 处理数据，如更新组件状态 }); }, beforeDestroy() { // 组件销毁前取消订阅，防止内存泄漏 pubsub.unsubscribe(this.pubId); } } ``` 这里，`msgName`是消息名称，`data`是发布者传递的数据[^5]。 - **步骤3：发布消息** 在另一个组件中，使用`publish`方法触发消息。 ```javascript import pubsub from 'pubsub-js'; export default { methods: { sendMessage() { // 发布消息，传递数据（如对象或字符串） pubsub.publish('hello', { name: '张三', age: 25 }); } } } ``` 消息名必须与订阅时一致，否则订阅者无法接收[^3]。 ##### 2. Vue3中的实现（使用Composition API或内置机制） Vue3推荐使用`provide/inject`或事件总线，但Pub-Sub模式可通过类似库实现，或结合`reactive`和自定义调度器。 - **方法1：使用`pubsub-js`（兼容Vue3）** 语法与Vue2相同，但需在`setup()`中使用。 ```javascript import { onMounted, onBeforeUnmount } from 'vue'; import pubsub from 'pubsub-js'; export default { setup() { let pubId; onMounted(() => { pubId = pubsub.subscribe('update', (msg, data) => { console.log('数据更新:', data); }); }); onBeforeUnmount(() => { pubsub.unsubscribe(pubId); }); } } ``` - **方法2：自定义Pub-Sub（利用Vue3的响应式系统）** 创建一个简易调度器，避免外部依赖。 ```javascript // 创建中央事件总线（eventBus.js） import { reactive } from 'vue'; const events = reactive({}); export const eventBus = { subscribe(event, callback) { if (!events[event]) events[event] = []; events[event].push(callback); }, publish(event, data) { if (events[event]) { events[event].forEach(cb => cb(data)); } }, unsubscribe(event, callback) { if (events[event]) { events[event] = events[event].filter(cb => cb !== callback); } } }; ``` 在组件中使用： ```javascript // 订阅者组件 import { eventBus } from './eventBus'; import { onMounted, onBeforeUnmount } from 'vue'; export default { setup() { const handleMessage = (data) => { console.log('接收数据:', data); }; onMounted(() => { eventBus.subscribe('userEvent', handleMessage); }); onBeforeUnmount(() => { eventBus.unsubscribe('userEvent', handleMessage); }); } } // 发布者组件 import { eventBus } from './eventBus'; export default { methods: { triggerEvent() { eventBus.publish('userEvent', { id: 1, value: '测试' }); } } } ``` 这种方法更灵活，适用于小型项目[^1][^4]。 #### 三、最佳实践 - **消息命名规范**：使用清晰、唯一的消息名（如`'user-updated'`），避免冲突[^3]。 - **取消订阅**：务必在组件销毁时取消订阅（`beforeDestroy`或`onBeforeUnmount`），否则会导致内存泄漏和性能问题[^5]。 - **数据最小化**：传递数据时只发送必要信息，减少冗余。 - **适用场景**：适合跨层级组件通信（如全局状态通知、兄弟组件交互），但简单父子通信优先使用`props/emits`[^1]。 - **性能考虑**：避免在高频更新场景（如实时游戏）使用，因回调函数执行可能影响渲染性能。优化方法包括节流（throttle）或使用Vue内置响应式系统[^4]。 #### 四、总结 Vue中的消息订阅与发布机制通过解耦发布者和订阅者，提升了组件的复用性和可维护性。在Vue2中，推荐使用`pubsub-js`库；Vue3可结合Composition API自定义实现。核心是中央调度器管理消息流转，确保数据单向更新[^2][^4]。实际开发中，根据项目复杂度选择合适方法，并遵循最佳实践以避免常见陷阱。
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值