Vue 消息订阅与发布

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

#vue.js #前端

1、一种组件间通信的方式，适用于任意组件间通信

2、使用步骤：

        1、安装pubsub：npm i pubsub-js

        2、引入：import pubsub from 'pubsub-js'

        3、接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A自身

methods() {
    demo(data){}
}

mounted() {
    this.pid = pubsub.subscribe('xxx', this.demo)
}

        4、提供数据：pubsub.publish('xxx', 数据)

        5、最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)取消订阅

Vue2 消息订阅与发布
qq_53374893的博客
08-12 531
实现任何框架的消息订阅发布。
【Vue】消息订阅与发布_pubsub & TodoList 编辑事件
2301_80636070的博客
05-07 1124
任意组件间通信</span>。使用步骤：引入:接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的<span style="color:red">回调留在A组件自身。
Vue消息订阅与发布
m0_61787196的博客
06-06 1296
Vue消息订阅与发布
vue消息订阅与发布
qq_52981021的博客
08-24 1161
消息订阅与发布
Vue的消息订阅与发布
技术小白=-=的博客
07-26 1888
Vue的消息订阅与发布，笔记版
Vue 消息的订阅与发布
半夏_2021的博客
06-23 1041
Vue 消息的订阅与发布
Vue——消息的订阅与发布
mantou_riji的博客
07-20 2648
一种组件间通信的方式，适用于。//订阅消息，编写回调函数。（A是订阅者，B是发布者）2.发布消息︰消息内容。1.订阅消息∶消息名。
Vue中的消息订阅与发布
weixin_46282323的博客
06-17 1203
消息订阅与发布模式是一种设计模式，它定义了对象间的一对多依赖关系。当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。发布者（Publisher）：负责发布消息，但不关心谁接收消息订阅者（Subscriber）：订阅感兴趣的消息，并定义处理逻辑消息中心（Event Bus）：作为中介，负责管理订阅关系和消息分发if (!},},特性Vue2Vue3核心实现Vue实例作为事件总线第三方库（如mitt）或自定义生命周期管理。
Vue发布订阅消息
yh_zeng2的博客
04-07 848
本案例我们使用pubsub-js第三方库实现消息的发布订阅。
vue消息的订阅与发布(pubsub)
m0_53620958的博客
09-09 702
vue中消息的订阅与发布
基于spring+vue把图片文件上传至阿里云oss容器并回显
2301_77170676的博客
11-21 504
本文介绍了基于Element UI的文件上传组件实现和阿里云OSS存储的后端处理。前端使用el-upload组件配置了文件上传接口、请求头、上传前后回调方法等属性。后端通过ossUtil工具类实现文件上传到阿里云OSS，包含Endpoint、AccessKey等必要配置参数，以及处理异常情况。最后通过Controller接收前端上传的文件，生成随机文件名后调用OSS工具类上传，返回文件访问URL。整个流程实现了从前端上传到云端存储的完整解决方案。
计算机毕设选题推荐：基于SpringBoot和Vue的校园智能物流管理系统
weixin_72790115的博客
11-19 612
校园智能物流管理系统摘要： 本系统基于SpringBoot和Vue技术栈开发，采用B/S架构解决高校快递管理难题。系统包含管理员、用户和快递员三种角色，实现全流程快递管理：管理员负责基础信息维护和订单监控；用户可在线寄件、预约取件及订单追踪；快递员处理快递状态更新。通过MySQL数据库保障数据可靠性，vue.js构建响应式前端界面，SpringBoot+MyBatis实现高效后端处理。系统有效优化了校园物流流程，提升了快递收发效率和信息透明度，为校园生活提供了便捷的物流服务解决方案。开发环境包括Java、I
父组件向子组件传递对象类型参数时，在子组件中修改对象的方法
SSHLY3的博客
11-20 312
Vue组件间对象参数传递规范 摘要：Vue中父组件向子组件传递对象参数时，禁止直接修改子组件Props（违反单向数据流）。推荐两种解决方案： 需同步父组件时：子组件通过defineEmits触发自定义事件，父组件监听事件并主动修改源数据； 仅子组件使用时：通过深拷贝创建对象副本进行本地修改。 对于表单场景，可使用v-model语法糖简化双向绑定。注意：嵌套对象修改需保持引用完整，深拷贝推荐JSON.parse(JSON.stringify)或lodash.clonedeep。始终遵循"子通知、父修
Vue3 setup 语法糖 和 响应式处理
dlmyrt的博客
11-20 218
setup 语法糖是 Vue3 组合式 API 的简化写法，通过<script setup>标签省略重复代码，直接在脚本内编写组合式 API 逻辑，大幅提升开发效率。
vue 3中 路由的配置方法
laocooon的博客
11-20 159
这是一个使用Vue 3构建的单页面应用(SPA)，配置了路由功能。代码展示了如何创建Vue应用并设置三个路由页面：首页(HomePage)、新闻页(NewsPage)和关于页(AboutPage)。通过vue-router实现页面导航，使用RouterLink组件进行页面跳转，RouterView组件显示当前路由内容。应用包含基础CSS样式，主要内容区域设置了背景色和边框样式。整个示例演示了Vue 3的组合式API和路由配置的基本用法。
Vue 工程化、ElementPlus 快速入门、ElementPlus 常见组件-表格组件、ElementPlus常见组件-分页条组件
最新发布
zeijiershuai的博客
11-21 556
Vue 工程化Vue 工程化、ElementPlus 快速入门、ElementPlus 常见组件-表格组件、ElementPlus常见组件-分页条组件
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]。实际开发中，根据项目复杂度选择合适方法，并遵循最佳实践以避免常见陷阱。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值