淺析從vue源碼看觀察者模式

var vm = new Vue({
 data () {
  return {
   a: 'hello vue'
  }
 }
})

walk (obj: Object) {
 const keys = Object.keys(obj)
 // 遍歷將其變成 vue 的訪問(wèn)器屬性
 for (let i = 0; i < keys.length; i++) {
  defineReactive(obj, keys[i], obj[keys[i]])
 }
}

// 設(shè)置為訪問(wèn)器屬性，并在其 getter 和 setter 函數(shù)中，使用發(fā)布/訂閱模式，互相監(jiān)聽(tīng)。
export function defineReactive (
 obj: Object,
 key: string,
 val: any
) {
 // 這里用到了觀察者（發(fā)布/訂閱）模式進(jìn)行了劫持封裝，它定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀察者監(jiān)聽(tīng)一個(gè)主題對(duì)象，這個(gè)主題對(duì)象的狀態(tài)發(fā)生改變時(shí)會(huì)通知所有觀察者對(duì)象，觀察者對(duì)象就可以更新自己的狀態(tài)。
 // 實(shí)例化一個(gè)主題對(duì)象，對(duì)象中有空的觀察者列表
 const dep = new Dep() 
 // 獲取屬性描述符對(duì)象(更多的為了 computed 里面的自定義 get 和 set 進(jìn)行的設(shè)計(jì))
 const property = Object.getOwnPropertyDescriptor(obj, key)
 if (property && property.configurable === false) {
  return
 }
 const getter = property && property.get
 const setter = property && property.set 
 let childOb = observe(val)
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  // 收集依賴，建立一對(duì)多的的關(guān)系，讓多個(gè)觀察者監(jiān)聽(tīng)當(dāng)前主題對(duì)象
  get: function reactiveGetter () {
   const value = getter ? getter.call(obj) : val
   if (Dep.target) {
    dep.depend()
    if (childOb) {
     childOb.dep.depend()
     // 這里是對(duì)數(shù)組進(jìn)行劫持
     if (Array.isArray(value)) {
      dependArray(value)
     }
    }
   }
   return value
  },
  // 劫持到數(shù)據(jù)變更，并發(fā)布消息進(jìn)行通知
  set: function reactiveSetter (newVal) {
   const value = getter ? getter.call(obj) : val
   if (newVal === value || (newVal !== newVal && value !== value)) {
    return
   }
   if (setter) {
    setter.call(obj, newVal)
   } else {
    val = newVal
   }
   childOb = observe(newVal)
   dep.notify()
  }
 })
}

return new Observer(value)

let uid = 0

export default class Dep {
 static target: ?Watcher;
 id: number;
 subs: Array<Watcher>;

 constructor () {
  // 用來(lái)給每個(gè)訂閱者 Watcher 做唯一標(biāo)識(shí)符，防止重復(fù)收集
  this.id = uid++
  // 定義subs數(shù)組，用來(lái)做依賴收集(收集所有的訂閱者 Watcher)
  this.subs = []
 }

 // 收集訂閱者
 addSub (sub: Watcher) {
  this.subs.push(sub)
 }

 depend () {
  if (Dep.target) {
   Dep.target.addDep(this)
  }
 }

 notify () {
  // stabilize the subscriber list first
  const subs = this.subs.slice()
  for (let i = 0, l = subs.length; i < l; i++) {
   subs[i].update()
  }
 }
}

// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null

// 定義收集目標(biāo)棧
const targetStack = []

export function pushTarget (_target: Watcher) {
 if (Dep.target) targetStack.push(Dep.target)
 // 改變目標(biāo)指向
 Dep.target = _target
}

export function popTarget () {
 // 刪除當(dāng)前目標(biāo)，重算指向
 Dep.target = targetStack.pop()
}

export default class Watcher {
 vm: Component;
 expression: string;
 cb: Function;

 constructor (
  vm: Component,
  expOrFn: string | Function,
  cb: Function,
  options?: Object
 ) {
  this.vm = vm
  vm._watchers.push(this)
  this.cb = cb
  // parse expression for getter
  if (typeof expOrFn === 'function') {
   this.getter = expOrFn
  } else {
   // 解析表達(dá)式
   this.getter = parsePath(expOrFn)
   if (!this.getter) {
    this.getter = function () {}
   }
  }
  this.value = this.get()
 }

 get () {
  // 將目標(biāo)收集到目標(biāo)棧
  pushTarget(this)
  const vm = this.vm
  
  let value = this.getter.call(vm, vm)
  // 刪除目標(biāo)
  popTarget()
  
  return value
 }

 // 訂閱 Dep，同時(shí)讓 Dep 知道自己訂閱著它
 addDep (dep: Dep) {
  const id = dep.id
  if (!this.newDepIds.has(id)) {
   this.newDepIds.add(id)
   this.newDeps.push(dep)
   if (!this.depIds.has(id)) {
    // 收集訂閱者
    dep.addSub(this)
   }
  }
 }

 // 訂閱者'消費(fèi)'動(dòng)作，當(dāng)接收到變更時(shí)則會(huì)執(zhí)行
 update () {
  this.run()
 }

 run () {
  const value = this.get()
  const oldValue = this.value
  this.value = value
  this.cb.call(this.vm, value, oldValue)
 }
}

Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
 const vm: Component = this
 if (Array.isArray(event)) {
  for (let i = 0, l = event.length; i < l; i++) {
   this.$on(event[i], fn)
  }
 } else {
  (vm._events[event] || (vm._events[event] = [])).push(fn)
 }
 return vm
}

Vue.prototype.$emit = function (event: string): Component {
 const vm: Component = this
 let cbs = vm._events[event]
 if (cbs) {
  cbs = cbs.length > 1 ? toArray(cbs) : cbs
  const args = toArray(arguments, 1)
  for (let i = 0, l = cbs.length; i < l; i++) {
   cbs[i].apply(vm, args)
  }
 }
 return vm
}