Vue 源码解析：深入响应式原理(下).docxVIP

Vue 源码解析：深入响应式原理（下）?Watcher我们先来看一下 Watcher 类的实现，它的源码定义如下：!-源码目录：src/watcher.js--export default function Watcher (vm, expOrFn, cb, options) { // mix in options if (options) { extend(this, options) } var isFn = typeof expOrFn === function this.vm = vm vm._watchers.push(this) this.expression = expOrFn this.cb = cb this.id = ++uid // uid for batching this.active = true this.dirty = this.lazy // for lazy watchers this.deps = [] this.newDeps = [] this.depIds = new Set() this.newDepIds = new Set() this.prevError = null // for async error stacks // parse expression for getter/setter if (isFn) { this.getter = expOrFn this.setter = undefined } else { var res = parseExpression(expOrFn, this.twoWay) this.getter = res.get this.setter = res.set } this.value = this.lazy ? undefined : this.get() // state for avoiding false triggers for deep and Array // watchers during vm._digest() this.queued = this.shallow = false}Directive 实例在初始化 Watche r时，会传入指令的 expression。Watcher 构造函数会通过 parseExpression(expOrFn, this.twoWay) 方法对 expression 做进一步的解析。在前面的例子中， expression 是times，passExpression 方法的功能是把 expression 转换成一个对象，如下图所示：可以看到 res 有两个属性，其中 exp 为表达式字符串；get 是通过 new Function 生成的匿名方法，可以把它打印出来，如下图所示：可以看到 res.get 方法很简单，它接受传入一个 scope 变量，返回 scope.times。对于传入的 scope 值，稍后我们会进行介绍。在 Watcher 构造函数的最后调用了 this.get 方法，它的源码定义如下：!-源码目录：src/watcher.js--Watcher.prototype.get = function () { this.beforeGet() var scope = this.scope || this.vm var value try { value = this.getter.call(scope, scope) } catch (e) { if ( process.env.NODE_ENV !== production config.warnExpressionErrors ) { warn( Error when evaluating expression + + this.expression + : + e.toString(), this.vm ) } } // touch every property so they are all tracked as // dependencies for deep watching if (this.deep) { traverse(value) } if (this.preProcess) { value = this.preProcess(value) } if (this.filters) { value = scope._applyFilters(