TypeScript实现Vue数据变化监听原理（观察者模式）

class Common {
  private _observers: Array<Observer> = new Array<Observer>()
  private _myData: string

  get observers(): Array<Observer> {
    return this._observers
  }

  set observers(value: Array<Observer>) {
    this._observers = value
  }

  get myData(): string {
    return this._myData
  }

  set myData(value: string) {
    this._myData = value
    this.notifyAllObservers()
  }

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

  notifyAllObservers(): void {
    this._observers.forEach(item => {
      item.update()
    })
  }
}

abstract class Observer {
  constructor(common: Common) {
    this.common = common
  }

  common: Common

  abstract update(): void
}

class FirstCommon extends Observer {

  constructor(common: Common) {
    super(common)
    common.attach(this)
  }

  update(): void {
    console.log('FirstCommon组件监听到了数据改变：', this.common.myData)
  }
}

class SecondCommon extends Observer {
  constructor(common: Common) {
    super(common)
    common.attach(this)
  }

  update(): void {
    console.log('SecondCommon组件监听到了数据改变：', this.common.myData)
  }
}

class Test {

  constructor() {
    let common = new Common()
    //组件1监听
    new FirstCommon(common)
    //组件2监听
    new SecondCommon(common)
    //测试修改数据
    common.myData = '测试文字'

  //  输出结果：
  //  FirstCommon组件监听到了数据改变：测试文字
  //  SecondCommon组件监听到了数据改变：测试文字
  }
}

new Test()