淺析從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,
 // 收集依賴(lài)，建立一對(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)做依賴(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
}