什么是观察者模式?
例如:抖音上的小杨哥,当小杨哥在抖音开启直播时,会自动通知所有的粉丝。 小杨哥:直播间开播了!
小杨哥为目标 抖友为观察者
目标应该具备
- 收集观察者
- 删除观察者
- 通知观察者
-
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><script>class XYG {constructor(name, age) {this.name = namethis.age = agethis.douyou = []}add(douyou) {// 收集观察者this.douyou.push(douyou)}// 通知观察者notify() {this.douyou.forEach(item => {console.log(item)item.update(this.name + '冷酸灵牙膏秒杀16件,仅39.99!')})}}// 目标const xyg = new XYG('小杨哥', 18)console.log(xyg)class douyou {constructor(name, age) {this.name = namethis.age = age}update(msg) {console.log(this.name + '接收通知' + msg)}}// 观察者const douyou1 = new douyou('抖友1号', 19)const douyou2 = new douyou('抖友2号', 20)const douyou3 = new douyou('抖友3号', 20)// 收集依赖xyg.add(douyou1)xyg.add(douyou2)xyg.add(douyou3)// 通知xyg.notify()console.log(xyg.douyou)</script> </body></html>
vue中的理解。 data中有三个对象人的data:{person1:{name:'张三'},person2:{name:'李四'},person3:{name:'王五'},} ,需求将三个人的名字都追加一个1,
this.person1.name="张三1"
this.person2.name="李四1"
this.person3.name="王五1"
此时vue会在Object.defineproperty的get函数中收集person123的变化信息。并在set函数中通知vue的生命周期update函数执行渲染。
update函数会将原来dom的节点和修改后的节点转换成虚拟节点(js对象)进行最小代价的计算(diff),最终使用patch函数渲染到页面上。