浅析vue项目中的观察者模式

 1 /**
 2  * A dep is an observable that can have multiple
 3  * directives subscribing to it.
 4  */
 5 export default class Dep {
 6   static target: ?Watcher;
 7   id: number;
 8   subs: Array<Watcher>;
 9 
10   constructor () {
11     this.id = uid++
12     this.subs = []
13   }
14 　　
15   addSub (sub: Watcher) {　　　　　　　　//添加订阅者
16     this.subs.push(sub)
17   }
18 
19   removeSub (sub: Watcher) {　　　　　　//删除订阅者
20     remove(this.subs, sub)
21   }
22 
23   depend () {
24     if (Dep.target) {
25       Dep.target.addDep(this)
26     }
27   }
28 
29   notify () {　　　　　　　　　　　　　　　//通知订阅者
30     // stabilize the subscriber list first
31     const subs = this.subs.slice()
32     if (process.env.NODE_ENV !== ‘production‘ && !config.async) {
33       // subs aren‘t sorted in scheduler if not running async
34       // we need to sort them now to make sure they fire in correct
35       // order
36       subs.sort((a, b) => a.id - b.id)
37     }
38     for (let i = 0, l = subs.length; i < l; i++) {
39       subs[i].update()　　　　　　　　　//订阅者update方法
40     }
41   }
42 }

 1 /**
 2    * Subscriber interface.
 3    * Will be called when a dependency changes.
 4    */
 5   update () {                                  //watcher作为订阅者的update方法
 6     /* istanbul ignore else */
 7     if (this.lazy) {
 8       this.dirty = true
 9     } else if (this.sync) {
10       this.run()
11     } else {
12       queueWatcher(this)
13     }
14   }