![[Vue2.x源码系列07]监听器watch原理](/static/background/123.jpg "[Vue2.x源码系列07]监听器watch原理")
本章目标
- 监听器是如何实现的？
- 监听器选项 - immediate、deep 内部实现
初始化
// 初始化状态
export function initState(vm {
const opts = vm.$options // 获取所有的选项
// 初始化监听器
if (opts.watch { initWatch(vm }
}
watch
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
vm.$watch创建一个监听器watch
function initWatch(vm {
let watch = vm.$options.watch
for (let key in watch {
const handler = watch[key] // handler有可能是 (字符串/对象/函数 或 数组
if (Array.isArray(handler {
for (let i = 0; i < handler.length; i++ {
createWatcher(vm, key, handler[i]
}
} else {
createWatcher(vm, key, handler
}
}
}
// handler 有可能是字符串、对象、函数
function createWatcher(vm, key, handler {
let options = {}
// 兼容字符串
if (typeof handler === 'string' {
handler = vm[handler]
}
// 兼容对象
else if (Object.prototype.toString.call(handler === '[object Object]' {
options = handler
handler = handler.handler
}
return vm.$watch(key, handler, options
}
vm.$watch
vm.$watch( expOrFn, callback, [options]
观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值
user: true。如果 immediate选项值为 true，则立即执行一次callback回调
Vue.prototype.$watch = function (exprOrFn, cb, options = {} {
options.user = true
// exprOrFn 可能是字符串firstname or 函数(=>vm.firstname
const watcher = new Watcher(this, exprOrFn, options, cb
// 立即执行
if(options.immediate{
cb.call(this, watcher.value, undefined
}
}
侦听器Watcher
在初始化Vue实例时，我们会给每个侦听器都创建一个对应watcher（我们称之为侦听器watcher，除此之外还有 渲染watcher 和 计算属性watcher ），他有一个 value 属性用于缓存侦听器观察的表达式的值
exprOrFn，需要观察的表达式或者一个函数的计算结果，需要兼容字符串和函数两种类型
dep.notify派发更新 并 调用 update 方法，然后再 run 方法中调用 cb 回调，其参数为新值和旧值
deep，侦听器选项之一，代表深度监听。我们需要在 get 方法中递归访问每一个子属性，这样就会保证所有子属性都会收集此侦听器watcher，这里我用了一个取巧的方法 - JSON.stringify，源码在此👈👈👈
class Watcher {
constructor(vm, exprOrFn, options, cb {
if (typeof exprOrFn === 'string' {
this.getter = function ( {
return vm[exprOrFn]
}
} else {
this.getter = exprOrFn // getter意味着调用这个函数可以发生取值操作
}
// 监听器watcher 用到的属性
this.user = options.user // 标识是否是用户自己的watcher
this.deep = options.deep
this.cb = cb
this.value = this.get( // 存储 get返回值
}
get( {
pushTarget(this
let value = this.getter.call(this.vm
this.deep && JSON.stringify(value // 深度监听
popTarget(
return value
}
// 重新渲染
update( {
queueWatcher(this // 把当前的watcher 暂存起来，异步队列渲染
}
// queueWatcher 内部执行 run 方法
run( {
let oldValue = this.value
let newValue = this.value = this.get(
if (this.user {
this.cb.call(this.vm, newValue, oldValue
}
}
}