观察者模式的作用

被动获取不确定何时发生的事件。常用于回调函数场景。

• 异步: setTimeout, setInterval, Promise
• Node.js: stream, readline, httpServer

标准观察者模式

class Subject {
  private state: number = 0
  private observers: Observer[] = []

  getState(): number {
    return this.state
  }

  setState(newState: number): void {
    this.state = newState;
    this.notify()
  }

  attach(observer: Observer): void {
    this.observers.push(observer)
  }

  private notify() {
    this.observers.forEach(observer => {
      observer.update(this.state)
    })
  }
}

class Observer {
  name: string
  constructor(name: string) {
    this.name = name
  }
  update(state: number): void {
    console.log(`${this.name} is updated, state is ${state}`)
  }
}

const sub = new Subject()
const observerA = new Observer('A')
sub.attach(observerA)
const observerB = new Observer('B')
sub.attach(observerB)
sub.setState(1)
// A is updated, state is 1
// B is updated, state is 1

观察者模式在Vue中的应用

Vue组件生命周期

Vue watch

import { ref, watch, reactive } from 'vue'

const timeRef = ref('时间戳')
watch(
    [timeRef], // ref 数组形式
    (newValues, values) => {
        console.log('name', newValues, values)
    }
)

const state = reactive({
    info: {
        city: '西安'
    }
})
watch(
    () => state, // reactive 函数形式
    () => {
        console.log('city', state.info.city)
    },
    { deep: true } // 深度监听
)

Vue组件更新

发布订阅者模式

利用媒介主动触发事件。常用于自定义事件，一般不与观察者模式进行区分。