$watch 基本上可以视为 Watcher 的封装,一般情况下 expOrFn 为 exp
Vue.prototype.$watch = function (
expOrFn: string | Function,
cb: any,
options?: Object
): Function {
const vm: Component = this
// 不同写法的兼容性处理,最终还是回到 $watch
if (isPlainObject(cb)) {
return createWatcher(vm, expOrFn, cb, options)
}
// 初始化 options
options = options || {}
// 确认当前 watch 为开发者定义的
options.user = true
// 创建 Watcher 实例
const watcher = new Watcher(vm, expOrFn, cb, options)
// 如果当前的 Watcher 被设定为在属性或函数被侦听后立即执行回调,则直接执行回调
if (options.immediate) {
try {
cb.call(vm, watcher.value)
} catch (error) {
handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)
}
}
// 返回一个取消监听的函数
return function unwatchFn () {
watcher.teardown()
}
}