vue中的观察者模式

vue2 底成的原理是 object.defineproperty（）配合观察者模式
object.defineproperty（）对数据可以进行劫持当数据发生变化的时候
需要通知被依赖的地方
这时候就需要用上观察者模式

什么是观察者模式

观察者模式简单的说就是一个对象被多个对象依赖，会自动更新所有依赖的对象

比如说
游戏发布了一次更新通知了所有玩家
这时候玩家就是观察者游戏就是被观察者或者说目标

案例

 class Subject{// 目标constructor(){this.observers=[]}add(observer){this.observers.push(observer)}notify(newMsg){this.observers.forEach(i=>i.consoleFn(newMsg))}
}class Observer{// 观察者constructor(name){this.name=name}consoleFn(newMsg){console.log(newMsg + '======》》》'+ this.name +'收到了')}
}let sub = new Subject()let observer1 = new Observer("观察者1")
let observer2 = new Observer("观察者2")sub.add(observer1) // Observer1 观察 sub
sub.add(observer2) // Observer2　观察　subsub.notify("我是被观察者，我发布了一个信息！") // sub 发布消息// 我是被观察者，我发布了一个信息！======》》》观察者1收到了
// 我是被观察者，我发布了一个信息！======》》》观察者2收到了

vue -观察者模式相关推荐

Vue观察者模式和发布订阅者模式
什么是观察者模式? 例如:抖音上的小杨哥,当小杨哥在抖音开启直播时,会自动通知所有的粉丝. 小杨哥:直播间开播了! 小杨哥为目标抖友为观察者目标应该具备收集观察者删除观察者通知观察者 & ...
Linux网络优化加速一键脚本
对于出口带宽,我们常常采用BBR,锐速等TCP加速软件来争夺带宽提高自己的速度. 但是原版的BBR并没有太多侵略性,在这个人人都用TCP加速的大环境下,BBR的加速功效就略显不足了.loc的大佬专门改 ...
vue学习【非父子组件传值问题（Bus/总线/观察者模式）】
如果两个组件是父子关系,就可以通过props的方式传值. 父组件通过props向子组件传值,子组件通过事件触发向父组件传值那么如果两个组件之间不具备父子关系,该如何传值呢?任何一个网页都可以拆分成几 ...
vue中的观察者模式
目录 1.什么是观察者模式? 2.抛出问题:有多个函数如何保证依次执行? 2-1 总结: 2-2 需求复杂点:当某个特定的事件发生,执行多个函数? 2-3 面向对象的写法: 2-4 总结: 1.什么是 ...
[Vue]非父子组件传值(bus/总线/观察者模式/发布订阅模式)
核心: 在vue原型中挂载vue实例通过this.bus.$emit('事件名', '参数')向外触发事件和传递参数在生命周期函数mounted中,通过this.bus.$on('传递出来的事件名 ...
Vue.js双向绑定的实现原理
Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
vue component created没有触发_Vue的难点解析
watch 和 computed 和 methods 区别是什么? computed 计算属性,在模板中双向绑定一些数据或表达式时,如果表达式过长,或逻辑更为复杂,就会变得臃肿,难以维护和阅读 < ...
初始化触发点击事件_【Vue原理】Event - 源码版之自定义事件
专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本[2.5.17] Vue 的自定义事件很简单,就是使用观察者模 ...

vue -观察者模式

观察者模式

vue中的观察者模式

什么是观察者模式

案例

vue -观察者模式相关推荐

最新文章

热门文章