Vue观察者模式

最新推荐文章于 2023-12-03 22:54:16 发布

阳庚

最新推荐文章于 2023-12-03 22:54:16 发布

阅读量1.7k

点赞数 2

分类专栏： Vue 文章标签： vue 前端框架

本文链接：https://blog.csdn.net/m0_58875326/article/details/124348177

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简单的来说一下在别人问你这个问题的时候怎么来回答它

前端新人，如有错误求大佬指出~求教💝

情景复现

大佬提问：“什么是观察者模式？”

我的回答：“观察者模式即一个对象被多个对象所依赖，当被依赖的对象发生更新时，会自动通知所有依赖的对象。体现在Vue中就是在在get数据的时候进行依赖收集，在set数据的时候会发布消息通知订阅者，触发监听回调，更新视图。”

例如：抖音上的小杨哥，当小杨哥在抖音开启直播时，会自动通知所有的粉丝。小杨哥：直播间海量福利商品，赶紧来抢购吧！

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

目标应该具备

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

<!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>

阳庚

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Vue观察者模式

简单的来说一下在别人问你这个问题的时候怎么来回答它前端新人，如有错误求大佬指出~求教💝情景复现大佬提问：“什么是观察者模式？”我的回答：“观察者模式即一个对象被多个对象所依赖，当被依赖的对象发生更新时，会自动通知所有依赖的对象。体现在Vue中就是在在get数据的时候进行依赖收集，在set数据的时候会发布消息通知订阅者，触发监听回调，更新视图。”例如：抖音上的小杨哥，当小杨哥在抖音开启直播时，会自动通知所有的粉丝。小杨哥：直播间海量福利商品，赶紧来抢购吧！小杨哥为目标.
复制链接

扫一扫