Vue.js响应式原理（三）——发布订阅模式和观察者模式

晓萌的百宝袋

于 2020-09-03 15:02:56 发布

阅读量3.7k

点赞数 4

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaozidewawa/article/details/108381583

版权

本文深入探讨Vue.js响应式原理，通过发布/订阅模式模拟Vue中的事件发布机制，详细解释观察者模式在Vue的响应机制中的应用，并对比两种模式的差异。文章内容包括：发布/订阅模式的概念及常见应用，模拟Vue组件间的通信，以及观察者模式的实现细节。

摘要由CSDN通过智能技术生成

发布/订阅模式

订阅者
发布者
信号中心

我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心发布（publish）一个信号，其他任务可以向信号中心订阅（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”（publish-subscribe pattern）

常见的发布/订阅模式：Vue
的自定义事件、node的事件处理机制。


let vm = new Vue()
vm.$on('dataChange', () => {
    console.log('dataChange')
})
vm.$on('dataChange', () => {
    console.log('dataChange1')
}) vm.$emit('dataChange')

在vue中vue实例既是发布者，也是订阅者，又是消息中心。

兄弟组件通信过程：


// eventBus.js
// 事件中心
let eventHub = new Vue()
// ComponentA.vue
// 发布者
addTodo: function () {
   
// 发布消息(事件)
eventHub.$emit('add-todo', {
    text: this.newTodoText }) this.newTodoText = ''