vue.js的发布者与订阅者

最新推荐文章于 2024-04-17 14:17:09 发布
最新推荐文章于 2024-04-17 14:17:09 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44163269/article/details/105080292
版权
本文介绍了Vue.js中的发布者-订阅者模式，通过$emit发布事件，$on订阅事件，$once实现一次性订阅，以及$off取消订阅。内容以代码示例的方式详细解析了这一机制的工作流程。
摘要由CSDN通过智能技术生成

介绍

就像一个微信公众号，它会定时推送内容，而订阅它的所有用户就会收到这个推送的内容

发布与订阅需要在同一个实例下才能够起效果
$emit - 发布者
$on — 声明订阅者
$once 订阅者只订阅一次消息（比如我订阅了一个公众号，它只给我推送了一个内容，我就把它取消订阅了，后续不会再收到）
$off 取消订阅（所有的订阅者只接受一次消息）

代码具体介绍

/*---------------------------html--------------------------*/
<div id="root">
    <input type="button" @click=
最低0.47元/天 解锁文章
web前端 zxp
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 发布订阅模式
Seric_xiao的博客
09-23 2833
发布订阅模式：订阅者，发布者，信号中心 我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心"发布"(publish)一个信号，其它任务可以向信号中心“订阅”(subscribe)这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern) 家长向学生所在的班级订阅了获取学生考试成绩的事件，当老师公布学生的成绩后，就会自动通知学生的家长。 在整个案例中，学生所在的班级为信号中心，老师为发布者，家长为订阅者 Vue 的自定义事
vue 发布订阅者模式
nickelLove的博客
04-10 746
EventBus 是一个 Vue.js 实例，可以在任何组件中使用 $emit() 方法发布事件，也可以使用 $on() 方法订阅事件。除了 $emit() 和 $on() 方法，EventBus 还提供了其它方法来管理事件，例如 $off() 方法可以取消订阅事件，$once() 方法可以订阅一次性事件等等。总之，Vue.js 的发布订阅者模式是一个非常强大的工具，可以让不同的组件之间进行松散耦合的通信，提高应用程序的可维护性和扩展性。
vue进阶-消息的订阅与发布
weixin_40017062的博客
07-13 2297
pubsub消息发布订阅适用于任何组件间通信，非常好用
vue发布订阅者模式(观察者模式)
qq_48546536的博客
04-17 339
Vue数据响应式系统总体来说分为两步：1、劫持数据；2、将数据改变要触发的回调函数与数据关联起来。observe 函数的功能就是劫持数据，让数据在被读取时收集依赖，在改变时触发依赖。如果数据为纯对象，则将其属性转变成访问器属性；如果数据是数组类型，则通过重写能够改变自身的方法来实现。对象添加、删除属性以及数组通过直接赋值的方式改变并不会触发依赖，这时要使用 Vue.set()、Vue.delete() 方法来操作。Dep 函数是用来生成盛放依赖的容器。
​vue中的观察者模式和发布订阅者模式​
包磊磊的博客
01-02 4209
观察者模式 目标者对象和观察者对象有相互依赖的关系，观察者对某个对象的状态进行观察，如果对象的状态发生改变，就会通知所有依赖这个对象的观察者， 目标者对象Subject，拥有方法：添加 / 删除 / 通知Observer； 观察者对象Observer，拥有方法：接收Subject状态变更通知并处理； 目标对象Subject状态变更时，通知所有Observer。 Vue中响应式数据变化是观察者模式 每个响应式属性都有dep，dep存放了依赖这个属性的watcher，watcher...
JS中的发布-订阅者模式
呱呱的博客
03-13 4529
一、前言 学习vue的时候，对深入响应式原理模模糊糊的，现在加深一下理解。 二、简述VUE响应原理。 vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter， 在数据变动时发布消息给订阅者，触发相应的监听回调。 三、什么是发布-订阅者模式 多个订阅者（一般是注册的函数）同时监听同一个数据对象，当这...
Vue.js面试题.pdf
最新发布
05-01
3. **订阅者（Watcher）**：每个组件实例都有对应的Watcher实例，当数据变化时，Watcher对象会得到通知，然后执行相应的方法更新视图。 4. **更新视图**：当数据发生变化时，会触发set的回调函数，从而更新视图。 #...
fake-vue.js:我自己的vue.js
05-11
Vue.js的响应式系统基于数据劫持和发布订阅模式，当数据变化时，视图会自动更新。 在这个"fake-vue.js"项目中，我们可以期待看到以下关键概念的实现： 1. **指令系统**：Vue.js中有一些预定义的指令，如`v-if`, `v...
vue.js响应式原理解析与实现
10-18
3. 当setter被调用时，通知Dep实例，即发布者，让其通知所有订阅者（Watcher）更新。 4. 定义一个Dep类，用于存储订阅者列表和通知它们更新的方法。 5. 定义一个Watcher类，代表一个具体的订阅者，当数据变化时，...
Vue发布订阅模式实现过程图解
10-15
主要介绍了Vue发布订阅模式实现过程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
深入理解vue.js双向绑定的实现原理
10-20
当数据（发布者）发生变化时，它会通知所有订阅者（视图组件），订阅者接收到通知后执行相应更新。 ### 八、Vue 双向绑定实现 Vue.js 双向绑定的完整实现包括以下步骤： 1. 编译模板，将数据绑定到 DOM 节点。 2. ...
Vue.js双向绑定实现原理详解
10-20
Vue.js的响应式数据绑定还利用了订阅发布模式，或者更准确地说，是观察者模式。当数据变化时，Vue.js会通知所有依赖于该数据的观察者（在这里是页面的DOM元素），然后触发更新操作。这一过程中，数据本身并不知道...
浅谈Vue的双向绑定原理——数据劫持+（订阅者/发布者）模式
王春燕的博客
05-08 3026
一、访问器属性 关于Vue的双向绑定，核心是Object.defineProperty()方法， 语法： Object.defineProperty(obj, prop, descriptor) 其中： obj 要在其上定义属性的对象。 prop 要定义或修改的属性的名称。 descriptor 将被定义或修改的属性描述符。 其实，简单点来说，就是通过此方法来定义一个值。 调用，使用到了get方法， 赋值，使用到了set方法。 ...
Vue——消息的订阅与发布
mantou_riji的博客
07-20 2533
一种组件间通信的方式，适用于。//订阅消息，编写回调函数。（A是订阅者，B是发布者）2.发布消息︰消息内容。1.订阅消息∶消息名。
代码实现vue的双向绑定（一）：订阅者和发布者
weixin_44769310的博客
03-05 1265
参看相关文章以及 vue 源码，自己去实现 vue 的双向绑定的观察者模式
vue中的观察者模式和发布订阅者模式
Jack, what else can you do besides holding your little darling?
10-25 927
观察者模式 目标者对象和观察者对象有相互依赖的关系，观察者对某个对象的状态进行观察，如果对象的状态发生改变，就会通知所有依赖这个对象的观察者， 1，目标者对象Subject，拥有方法：添加 / 删除 / 通知Observer； 2，观察者对象Observer，拥有方法：接收Subject状态变更通知并处理； 3，目标对象Subject状态变更时，通知所有Observer。 Vue中响应式数据变化是观察者模式 每个响应式属性都有dep，dep存放了依赖这个属性的watcher，w...
vue.js实现原理 -- 订阅者，发布者模式
weixin_34120274的博客
03-06 6474
zh众所周知，vue2.x版本是通过Object.defineProperty() 种的get进行拦截，set进行发送，其实这只是表面理解，实际运用的是JavaScript的 订阅者、发布者模式。首先，了解一下什么是订阅者、发布者模式 吧。w3c 上是这么定义的可以用一个图来理解首先我们来实现一下使用原型链的写法吧//定义一个函数,用来承载 function publisher ...
vue 路由的内置组件 router-view 详细介绍（有图有真相）
热门推荐
北芒的博客
03-29 6万+
介绍 当你的地址符合我的路由要求的时候，会把路由的组件在 你的界面中呈现，而这个界面实在 App.vue里面 当你打开 App.vue就会在里面发现这两个组件 这两个是 vue 给你提供的两个 vue 内置组件 功能介绍 router-link 实现路由之间的跳转 router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值