Vue观察者模式和发布订阅者模式

书中自有妍如玉

已于 2022-08-25 14:52:50 修改

阅读量1.1k

点赞数

分类专栏：前端文章标签：观察者模式

于 2022-08-23 09:52:32 首次发布

本文链接：https://blog.csdn.net/qq_26695613/article/details/126478688

版权

前端专栏收录该内容

133 篇文章 6 订阅

订阅专栏

什么是观察者模式？

例如：抖音上的小杨哥，当小杨哥在抖音开启直播时，会自动通知所有的粉丝。小杨哥：直播间开播了！

小杨哥为目标抖友为观察者

目标应该具备

收集观察者
删除观察者
通知观察者

<!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 = name
        this.age = age
        this.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 = name
        this.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函数渲染到页面上。