在数据劫持之外最重要的部分就是Dep和Watcher,这其实是一个观察者模式。 用最简单的代码实现以下Vue的观察者模式: 通过watcher.evaluate()将自身实例赋值给Dep.target 调用dep.depend()将dep实例将watcher实例push到dep.subs中 通过数据劫持,在调用被劫持的对象的set方法时,调用dep.subs中所有的watcher.update() // 观察者 class Dep { constructor() { this.subs = [] } addSub(sub) { this.subs.push(sub) } depend() { if (Dep.target) { Dep.target.addDep(this); //添加每次实例化watcher后绑定到Dep.target上的watcher实例 } } notify() { this.subs.forEach(sub => sub.update()) } } // 被观察者 class Watcher { constructor(vm, expOrFn) { this.vm = vm; this.getter = expOrFn; this.value; } get() { Dep.target = this; var vm = this.vm; var value = this.getter.call(vm, vm); return value; } evaluate() { this.value = this.get(); } addDep(dep) { dep.addSub(this); } update() { console.log('更新, value:', this.value) } } // 观察者实例 var dep = new Dep(); // 被观察者实例 var watcher = new Watcher({x: 1}, (val) => val); watcher.evaluate(); // 观察者监听被观察对象 dep.depend() dep.notify()