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