观察者模式以及在 Vue 源码中的实践

var event = {
  // 缓存列表
  clientList: [],
  // 订阅
  listen: function(key, fn){
    if (!this.clientList[key]) {
      // 订阅列表中没有这个 key 则把初始化这个 key 的队列为空
      this.clientList[key] = []
    }
    this.clientList[key].push(fn)
  },
  trigger: function () {
    var key = Array.prototype.shift.call(arguments)
    var fns = this.clientList[key]
    if (!fns || fns.length === 0) return false
    // 遍历缓存列表，挨个触发回调
    for (var i = 0, fn; fn = fns[ i++ ];){
      fn.apply(this, arguments)
    }
  },
  remove: function (key, fn) {
    var fns = this.clientList[key]
    if (!fns){
      return false;
    }
    if (!fn){
      fns && (fns.length = 0)
    } else {
      for (var l = fns.length - 1; l >=0; l--){
        var _fn = fns[l]
        if (_fn === fn){
          fns.splice(l, 1)
        }
      }
    }
  }
}

// 管理，通知订阅者
// 定义缓存列表，为外部提供 添加订阅/通知订阅者 的接口
export default class Dep{
    constructor(){
        // 缓存列表
        this.subs = []
    }
    addSub(sub){
        // 添加订阅，即向缓存列表中添加新项
        this.subs.push(sub)
    }
    notify(){
        // 通知所有的订阅者(Watcher)，触发订阅者的相应回调
        this.subs.forEach((sub) => sub.update())
    }
}

// 引入订阅管理模块
import Dep from 'Dep'
// 定义订阅
export default class Watcher{
    // 接受三个参数，实例，所订阅数据，指定的回调
    constructor(vm, expOrFn, cb){
        this.vm = vm // 取到 Vue 实例，从而拿到实例上的 data
        this.cb = cb // 数据更新时触发的回调函数
        this.expOrFn = expOrFn // 被订阅的数据
        this.val = this.get() // 赋值为定义订阅时的数据，即更新前的值
    }
    // 对外暴露的接口，数据更新时发布者将调用这个接口
    update(){
        this.run()
    }
    run(){
        // 订阅数据发生变化时，更新 val ，触发回调
        // val 为当前值， this.val 为更新前的值
        const val = this.get()
        if(val !== this.val){
            this.val = val;
            this.cb.call(this.vm)
        }
    }
    get(){
        // 读取所订阅数据的最新值
        Dep.target = this
        const val = this.vm._data[this.expOrFn]
        // 指针置空
        Dep.target = null
        return val;
    }
}

// 定义 Observer 数据监听器
// 引入 Dep 订阅管理模块
import Dep from 'Dep'
// 定义 Observer 类，将所监听数据遍历每一项传入到 defineReactive 以加入 get/set 方法
export default class Observer{
    constructor(value){
        this.value = value
        this.walk(value)
    }
    walk(value){
        // 遍历所监听对象、数组的每一项
        Object.keys(value).forEach(key => this.convert(key, value[key]))
    }
    convert(key, val){
        defineReactive(this.value, key, val)
    }
}
export function defineReactive(obj, key, val){
    // 创建新的订阅
    var dep = new Dep()
    // 给当前属性的值添加监听
    var chlidOb = observe(val)
    // 加上 get/set
    Object.defineProperty(obj, key, {
        // 设置为属性可遍历
        enumerable: true,
        // 属性可删除，可修改其 emumerable/writable 等属性
        configurable: true,
        get: ()=> {
            console.log('get value')
            // Dep.target 为 watcher 实例
            // 如果存在这个 watcher 则将其加入到 sub 队列
            // Watcher实例在实例化过程中，会触发当前get方法
            if(Dep.target){
                dep.addSub(Dep.target)
            }
            return val
        },
        set: (newVal) => {
            // 如果数据被修改则会触发这段 set 函数
            console.log('new value seted')
            if(val === newVal) return
            val = newVal
            // 监听新值
            chlidOb = observe(newVal)
            // 通知所有订阅者，数值被改变了
            dep.notify()
        }
    })
}
// 创建监听，在调用Observer类的外面加了层判断
export function observe(value){
    // 当值不存在，或者不是对象，就不监听了
    if(!value || typeof value !== 'object'){
        return
    }
    return new Observer(value)
}