精华内容

下载资源

问答

我要提问

Vue发布订阅模式实现过程图解
2020-10-15 09:13:18
主要介绍了Vue发布订阅模式实现过程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收起

vue发布订阅模式封装

2019-11-01 17:21:57

/* $on("event",fn); $emit("event",parms...) $off("event") 事件的所抛发的函数全部关掉 $off("event",fn) 关掉事件所抛发的发你函数 */ ...const eventList = {};...const $on = (eventName, eventFunction) =&...


/* 
    $on("event",fn);
    $emit("event",parms...)

    $off("event") 事件的所抛发的函数全部关掉
    $off("event",fn)  关掉事件所抛发的发你函数

*/


const eventList = {};

const $on = (eventName, eventFunction) => {
    if (!eventList[eventName]) {
        eventList[eventName] = []
    }
    eventList[eventName].push(eventFunction)
}

const $emit = (eventName, ...params) => {
    if (eventList[eventName]) {
        let arr = eventList[eventName];
        arr.forEach(eventFunction => {
            eventFunction(...params)
        });
    }
}

const $off = (eventName, eventFunction) => {
    if (eventList[eventName]) {
       

        if (eventFunction) {
            let flag = eventList[eventName].includes(eventFunction);
            if(flag){
                let index = eventList[eventName].indexOf(eventFunction)
                eventList[eventName].splice(index, 1);
            }
        } else {
            eventList[eventName].length = 0;
        }


    }
}



$on("sss", fn1);
$off("sss");
$emit("sss", 1, 2, 3);
function fn1(a, b, c) {
    console.log("fn1执行了");
    console.log(a, b)
}

收起

展开全文

手写实现vue 发布订阅模式和观察者模式

2020-12-09 20:40:27

发布 订阅模式 // 事件触发器 class EventEmitter { constructor () { // { 'click': [fn1, fn2], 'change': [fn] } this.subs = Object.create(null) } // 注册事件 $on (eventType, handler) { ...

发布 订阅模式
  // 事件触发器
    class EventEmitter {
      constructor () {
        // { 'click': [fn1, fn2], 'change': [fn] }
        this.subs = Object.create(null)
      }

      // 注册事件
      $on (eventType, handler) {
      	debugger
        this.subs[eventType] = this.subs[eventType] || []
        this.subs[eventType].push(handler)
        debugger
      }

      // 触发事件
      $emit (eventType) {
      	debugger
        if (this.subs[eventType]) {
        	debugger
          this.subs[eventType].forEach(handler => {
            handler()
            debugger
          })
        }
      }
    }

    // 测试
    let em = new EventEmitter()
    em.$on('click', () => {
      console.log('click1')
    })
    em.$on('click', () => {
      console.log('click2')
    })
    em.$on('fn', ()=> {
    	console.log('fn')
    })
    em.$emit('click')
    em.$emit('fn')

观察者模式
    // 发布者-目标
    class Dep {
      constructor () {
        // 记录所有的订阅者
        this.subs = []
      }
      // 添加订阅者
      addSub (sub) {
        if (sub && sub.update) {
          this.subs.push(sub)
        }
      }
      // 发布通知
      notify () {
        this.subs.forEach(sub => {
          sub.update()
        })
      }
    }
    // 订阅者-观察者
    class Watcher {
      update () {
        console.log('update')
      }
    }

    // 测试
    let dep = new Dep()
    let watcher1 = new Watcher()
    let watcher2 = new Watcher()
    
    dep.addSub(watcher1)
    dep.addSub(watcher2)
    
    dep.notify()

两者的区别

收起

展开全文

vue发布订阅模式简易实现

2019-09-02 13:14:29

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> function Dep(){ ... ...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function Dep(){
				this.fl = []
			}
			Dep.prototype.dingyue = function(watcher){
				this.fl.push(watcher)
			}
			Dep.prototype.fabu = function(){
				this.fl.forEach(item=>{
					item.update()
				})
			}
			
			function Watcher(f){
				this.f = f
			}
			Watcher.prototype.update = function(){
				this.f()
			}
			let watcher = new Watcher(function(){
				alert(1)
			})
			let watcher1 = new Watcher(function(){
				alert(2)
			})
			let dep = new Dep()
			dep.dingyue(watcher)
			dep.dingyue(watcher1)
			dep.fabu()
			
		</script>
	</body>
</html>

收起

展开全文

Vue中的发布订阅模式和数据传递

2020-09-19 01:01:57

（3）Vue中的事件绑定就是发布订阅模式 （4）观察者模式中观察者和被观察者是存在关联的。发布订阅模式中订阅者和发布者没有关联，所以观察者模式中包含了发布订阅模式(watcher和deep) 2、数据传递 /** *1....

1、发布订阅模式

（1）Vue 中观察者模式和发布/订阅模式的区别和场景

（2）Vue 中响应式数据变化就是典型的观察者模式

（3）Vue 中的事件绑定就是发布订阅模式

（4）观察者模式中观察者和被观察者是存在关联的。发布订阅模式中订阅者和发布者没有关联，所以观察者模式中包含了发布订阅模式 (watcher和deep)

2、数据传递

/**

* 1.vue是单向数据流

* 2. Vue组件间传值的方式及之间的区别

* 3.props和emit父组件向子组件传递数据是通过props传递的，子组件传递数据给父组件是通过$emit触发来做到的

* 4.$parent，$children 获取父子组件的实例

* 5. $attrs 和$listeners A->B->C。Vue 2.4开始提供了$attrs和$listeners来解决问题

* 6.父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。

* 7.$refs 获取实例

* 8.eventBus 平级/跨级组件数据传递这种情况可以使用中央事件总线的方式。

* 9.Vuex状态管理

收起

展开全文

vue发布订阅者模式$emit、$on
2019-07-21 11:19:10
在vue中自定义事件，就是用了发布订阅者模式，vm.$on通过自定义事件，事先订阅一件事，vm.$emit通过自定义事件发布消息，vm.$on会接收到。非父子组件数据传递，通常会用到这两个方法：下边我们先来用js实现发布...
收起
模拟Vue中的发布订阅模式
2020-08-20 10:38:38
发布订阅模式 $ 定义基于一个自定义事件通道，收集与之相关的订阅成员，通过发布自定义事件的方式通知各个订阅成员。 $ Vue中的语法 // Vue 自定义事件 let vm = new Vue() // 注册事件(订阅消息) vm.$on('data...
收起
js
vue中发布订阅者模式
千次阅读 2020-01-13 10:54:07
https://www.jianshu.com/p/2ec316ca0f8b
收起
发布订阅模式实现vue组件间通信
2019-05-09 23:16:47
发布订阅模式实现vue组件间通信前几天遇到个问题，“发布订阅模式实现vue组件间通信”，当时没回答出来，之后通过查询一些资料学习了一下，因此在这里记录一下，也欢迎大家指正，（小白，请求轻喷） window.bus = {...
收起
兄弟组件通信
发布订阅模式在vue中的实际运用实例详解
2020-11-30 15:05:24
比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学，可以把他类比于 watch 下面我们看一个例子 var observe={ fnsObj:{}, // 订阅方法 on:function(key,fn){ if(!observe.fnsObj[key]){ ...
收起
vue非父子组件传值之发布订阅模式
2018-10-31 18:27:55
vue非父子组件传值之发布订阅模式 目前了解的组件传值的几种方式 props 再熟悉不过了 vuex 也比较常用 evenbus 发布订阅主要说一下发布订阅 Vue.prototype.bus = new Vue(); 其实优化一下，也可以这样 Vue....
收起
结合 Vue 源码谈谈发布-订阅模式
千次阅读 2018-10-21 10:23:23
发布订阅模式主要包含哪些内容呢? 发布函数，发布的时候执行相应的回调订阅函数，添加订阅者,传入发布时要执行的函数,可能会携额外参数一个缓存订阅者以及订阅者的回调函数的列表取消订阅(需要分情况讨论) ...
收起
Vue 发布/订阅与观察者模式
2020-12-29 22:58:43
发布/订阅模式 发布/订阅模包含：发布者订阅者信号中心假设你要买房子，但是你有没有房源信息，那么你会找到谁？你肯定会去问房屋中介，那么这个房屋中介就是一个信号中心。那么这个房子的主人也就是房东是...
收起
前端
05-vue源码学习-发布订阅模式
2020-12-10 12:00:54
发布订阅模式 目标: 解耦, 让各个模块之间没有紧密的联系现在的处理办法是属性在更新的时候调用 mountComponent 方法. 问题: mountComponent 更新的是什么??? (现在) 全部的页面 -> 当前虚拟 DOM 对应的页面 ...
收起
Vue Object.defineProperty发布订阅模式架构详解
2021-02-26 09:59:49
Object.defineProperty发布订阅模式架构详解 1、 Object.defineProperty定义 Object.defineProperty(Object,prop,descriptor) 参数： obj：必需，目标对象 prop：必需，目标对象需获取或者修改的属性的名字 ...
收起
js
vue Bus总线/发布订阅模式/观察者模式
2019-02-21 10:19:31
当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。参考：http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1 例子：...
收起
vue源码系列05_发布订阅模式
2020-05-16 22:19:45
vue源码系列05_依赖收集dep.jswatcher.jsdefineReactive() 所谓依赖收集，就是在每个数据渲染更新的时候，给每个数据添加一个watcher监听类，当该数据发生变化时，用一个dep队列来实现收集这些watcher，最后统一渲染...
收起
Vue.js响应式原理（三）——发布订阅模式和观察者模式
2020-09-03 15:02:56
发布/订阅模式 订阅者发布者信号中心我们假定，存在一个“信号中心”，某个...常见的发布/订阅模式：Vue 的自定义事件、node的事件处理机制。 let vm = new Vue() vm.$on('dataChange', () => { console.lo
收起
javascript 前端
发布订阅者模式以及vue中数据劫持 +结合发布/订阅模式
2019-04-17 03:18:05
// vue中数据劫持结合发布/订阅模式 class Observer { constructor (value) { this .value = value this .dep = new Dep() this .walk(value) } walk (obj) { const keys = Object ....
收起
vue响应式依赖的两种技术之-发布订阅模式的实现
2020-02-05 21:59:04
vue响应式依赖的两种技术： 1.Vue中修改数据，Vue内部是如何监听message数据的...继续上篇个人博客，实现下发布订阅模式， 发布订阅模式实现的时候有个坑：数组坍陷问题这里采用es6的新语法封装发布订阅类，使用for...
收起

1 2 3 4 5 ... 20

收藏数 1,243

精华内容 497

热门标签

关键字：

vue发布订阅模式

vue 订阅

Vue发布订阅模式实现过程图解

vue发布订阅模式封装

手写实现vue 发布订阅模式和观察者模式

vue发布订阅模式简易实现

Vue中的发布订阅模式和数据传递

1、发布订阅模式

2、数据传递

vue发布订阅者模式$emit、$on

模拟Vue中的发布订阅模式

vue中发布订阅者模式

发布订阅模式实现vue组件间通信

发布订阅模式在vue中的实际运用实例详解

vue非父子组件传值之发布订阅模式

结合 Vue 源码谈谈发布-订阅模式

Vue 发布/订阅与观察者模式

05-vue源码学习-发布订阅模式

Vue Object.defineProperty发布订阅模式架构详解

vue Bus总线/发布订阅模式/观察者模式

vue源码系列05_发布订阅模式

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

发布订阅者模式以及vue中数据劫持 +结合发布/订阅模式

vue响应式依赖的两种技术之-发布订阅模式的实现

vue发布订阅模式

Vue发布订阅模式实现过程图解

vue发布订阅模式封装

手写实现vue 发布 订阅模式和观察者模式

vue发布订阅模式简易实现

Vue中的发布订阅模式和数据传递

1、发布订阅模式

2、数据传递

vue发布订阅者模式$emit、$on

模拟Vue中的发布订阅模式

vue中发布订阅者模式

发布订阅模式实现vue组件间通信

发布订阅模式在vue中的实际运用实例详解

vue非父子组件传值之发布订阅模式

结合 Vue 源码谈谈发布-订阅模式

Vue 发布/订阅 与 观察者模式

05-vue源码学习-发布订阅模式

Vue Object.defineProperty发布订阅模式架构详解

vue Bus总线/发布订阅模式/观察者模式

vue源码系列05_发布订阅模式

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

发布订阅者模式以及vue中数据劫持 +结合发布/订阅模式

vue响应式依赖的两种技术之-发布订阅模式的实现

vue发布订阅模式

手写实现vue 发布订阅模式和观察者模式

Vue 发布/订阅与观察者模式