如何理解computed和watch?
computed&watch源码分析
date: 2021-04-06
下面我根据一个简单的例子 来重头分析
<span>{{getMessage}}</span>
<span>{{otherMessage}}</span>
{
data:{
message:'我是初始化值',
otherMessage:'我是另一个初始化值'
},
computed:{
getMessage(){
return this.message + '_computed'
}
},
watch:{
'message':function(val,oldVal){
console.log(val,oldVal)
}
},
mounted() {
setTimeout(() => {
// 1. 改变computed依赖的响应式值 message
this.message = '改变computed依赖的响应式值 message'
// 2. 改变非computed依赖的响应式值 otherMessage
this.otherMessage = '改变非computed依赖的响应式值 otherMessage'
},3000)
},
}
1. 执行initData 给data下的数据做defineProperty设置
-> message -> Dep(id:3) -> getter&setter
-> otherMessage -> Dep(id:4) -> getter&setter
2. 执行initComputed
-> 生成vm._computedWatcher = 实例化一个watcher 这里称之为 "计算watcher"(id:1)
-> 这里“计算watcher”(id:1) 特别需要注意 传入Watcher第二个参数就是 用户所编写的computed函数 -> 则watcher.getter = computed函数
-> “计算watcher”(id:1) 默认lazy:true -> 导致dirty:false -> 表示不再实例watcher时就进行求值 真正求值是当渲染时 执行get方法 调用watcher.getter方法求值
-> 最后将computed的key值如上面的'getMessage'通过defineProperty方法 -> 挂载到实例vm下面 -> 且描述中 getter为“createComputedGetter”函数(当模板中访问该值时会触发该getter)
-> this.value = this.lazy ? undefined : this.get() -> 当前watcher的value为undefined
3. 执行initWatch
-> 针对组件内watch的几种写法做处理
1. 'key' : function 函数格式,如上
2. 'key' : name in methods 直接绑定到methods对象里面声明的方法
3. 'key' : [handler1,handler2,...] 后面跟handler操作数组)
4. 'key' : Object 后面跟个对象 但是对象里面必须包含一个叫'handler'的key的键值对处理函数
-> 实例化一个watcher 这里称之为 "监听watcher"(id:2)
-> 这里“监听watcher”(id:2) 特别需要注意 传入Watcher第二个参数只是 我们写的监听key值(如上面的'message')而第三个参数则是用户所编写的回调函数 -> 则watcher.getter = parsePath()其实就是访问实例上的响应式值
-> “监听watcher”(id:2) 默认user:true -> 则lazy:false -> dirty:false
-> this.value = this.lazy ? undefined : this.get() -> 则立即执行get方法求值value
-> 但凡执行get方法 都会操作全局Dep.Target = 当前watcher(“监听watcher”(id:2))
-> 执行watcher.getter(parsePath()) -> 一旦拿'message' -> 触发响应式数据的getter函数
-> 当前全局栈是 “监听watcher”(id:2) 而当前闭包下 Dep(id:3)
-> 这个时候 就是很关键的依赖收集了 -> 说明“监听watcher”(id:2)依赖Dep(id:3)
-> 执行后 此时 Dep(id:3)上的subs里面收集了一个“监听watcher”(id:2) 而“监听watcher”(id:2)上的newDeps收集到了Dep(id:3) 等于说watcher上有dep dep上有watcher
-> 再出栈 Dep.Target = undefined
-> 将 “监听watcher”(id:2)上的newDeps&newDepsIds赋值到deps&depIds上面 并最后置两者为空 等待下一次update变化
4. 执行挂载 会触发渲染函数render
-> 会实例化一个watcher 这里称之为 "渲染watcher"(id:3)
-> "渲染watcher"(id:3) 特别需要注意 传入Watcher第二个参数就是 updateComponent函数(vm._update(vm._render()))-> 则watcher.getter = vm._update(vm._render())
-> "渲染watcher"(id:3) 默认lazy:false -> dirty:false
-> this.value = this.lazy ? undefined : this.get() -> 则立即执行get方法求值value
-> 但凡执行get方法 都会操作全局Dep.Target = 当前watcher("渲染watcher"(id:3))
-> 执行vm.render()方法 -> 则会触发with匿名函数来创建vnode
-> 则触发data响应式值的getter 或 computed函数的getter
-> 该例子下 先触发computed函数的getter -> 通过之前赋值到_computedWatchers拿到当前的“计算watcher”(id:1) -> “计算watcher”(id:1)dirty为false
-> 则执行“计算watcher”(id:1)的evaluate方法来取值 -> 执行get方法
**** -> 我们经常谈的计算属性具有缓存特性 这里它的缓存特性就是dirty这个参数的值来决定的 若dirty为true 则重新计算computed函数值 若dirty为false 则拿watcher上的value值
-> 但凡执行get方法 都会操作全局Dep.Target = 当前watcher(“计算watcher”(id:1)) 当前Dep栈里面存在两个watcher [‘"渲染watcher"(id:3)’,‘“计算watcher”(id:1)’]
-> 调用watcher.getter(定义的computed函数)
-> 触发data响应式数据的getter
-> 当前全局栈是 “计算watcher”(id:1) 而当前闭包下 Dep(id:3)
-> 这个时候 就是很关键的依赖收集了 -> 说明“计算watcher”(id:1)依赖Dep(id:3)
-> 执行后 此时 Dep(id:3)上的subs里面收集了两个[“监听watcher”(id:2), “计算watcher”(id:1)] 而“计算watcher”(id:1)上的newDeps收集到了Dep(id:3) 等于说watcher上有dep dep上有watcher
-> 再出栈 Dep.Target = undefined -> 将 “计算watcher”(id:1)上的newDeps&newDepsIds赋值到deps&depIds上面 并最后置两者为空 等待下一次update变化
-> 出栈后 此时Dep.Target = "渲染watcher"(id:3)
**** -> 很关键的将“计算watcher”(id:1)上的dirty置为false
-> 继续在computed的getter函数内执行
-> 因为此时Dep.Target = "渲染watcher"(id:3) -> 所以需要将"渲染watcher"(id:3) 收集起来
-> 即当前Dep(id:3)下的subs里面收集了3个watcher [‘"监听watcher"(id:2)’, ‘“计算watcher”(id:1)’, ‘"渲染watcher"(id:3)’]
-> 而每种watcher下也收集了依赖Dep(id:3)
-> 继续执行with匿名函数
-> 触发data响应式数据otherMsg的getter -> 此时Dep.Target = "渲染watcher"(id:3)
-> 则Dep(id:4)上的subs里面收集这个watcher ['"渲染watcher"(id:3)'] 而"渲染watcher"(id:3)上收集两个依赖 ['Dep(id:3)', 'Dep(id:4)']
5. 挂载完毕 回到渲染watcher的get方法
-> 执行出栈 Dep.Target = undifined 剩余空栈 []
6. 若执行 this.message = '改变computed依赖的响应式值 message'
-> 闭包特性当前Dep(id:3) 执行notify方法
-> 遍历执行Dep(id:3)下的subs里面的所有watcher执行update方法
-> 因为改变的是message这个值 它关联了3个watcher 所以分别执行
-> 1. ‘"监听watcher"(id:2)’ : 因为lazy:false -> 将‘"监听watcher"(id:2)’压进queue队列 且压入异步操作队列
-> 2. ‘“计算watcher”(id:1)’ :因为lazy:true -> 将 dirty置为true -> 为了重新计算computed值 因为你依赖变化了 自然需要求新值
-> 3. ‘"渲染watcher"(id:3)’ :因为lazy:false -> 将‘渲染watcher"(id:3)’压进queue队列
-> 此时queue队列里面两个值 [‘"监听watcher"(id:2)’,‘渲染watcher"(id:3)’]
-> 异步操作最后执行
7. 对queue队列进行id由小到大升序排列
-> 1. 因为父组件始终先于子组件进行创建 则执行watcher更新也是父组件先更新 子组件后更新
-> 2. 因为用户自定义的watcher就是watch配置 它比渲染watcher先创建 它在initWatch函数就创建了 先执行它 -> 也就执行用户的回调监听函数了
-> 3. 若组件被销毁 则会跳过它的watcher更新
8. 遍历queue
-> 若为‘"渲染watcher"(id:3)’ -> 则触发before钩子 beforeUpdate -> 执行run方法 -> 执行get方法 -> value为undefined
-> 若为‘"监听watcher"(id:2)’ -> 则执行run方法 -> 执行get方法
若执行 this.otherMessage = '改变非computed依赖的响应式值 otherMessage'
-> 闭包特性当前Dep(id:4) 执行notify方法
-> 遍历执行Dep(id:4)下的subs里面的所有watcher执行update方法
-> 因为改变的是otherMessage这个值 它只关联了1个watcher 也就是渲染watcher
-> 因此区别就来了 当渲染模板访问计算属性值时 此时因为没改变依赖值 所以dirty为false 所以返回缓存值 其他逻辑差不多
/**1. 初始化state 源码:4635行*/
function initState(vm) {
vm._watchers = [];
var opts = vm.$options;
if (opts.props) {
initProps(vm, opts.props);
}
if (opts.methods) {
initMethods(vm, opts.methods);
}
if (opts.data) {
initData(vm);
} else {
observe((vm._data = {}), true /* asRootData */);
}
if (opts.computed) {
initComputed(vm, opts.computed);
}
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch);
}
}
/**2. initComputed 源码:4756行*/
var computedWatcherOptions = { lazy: true }; // 注意默认computed配置了lazy属性 表示不马上执行get()取值
function initComputed(vm, computed) {
// $flow-disable-line
var watchers = (vm._computedWatchers = Object.create(null));
// computed properties are just getters during SSR
var isSSR = isServerRendering();
for (var key in computed) {
var userDef = computed[key];
// TODO: 1. 这里可以看出computed的两种写法
// 一种直接使用函数
// 一种使用对象但是需要配置get或set
// 2. 这里的getter也就是我们之前看到的‘updateComponent’
var getter = typeof userDef === 'function' ? userDef : userDef.get;
if (getter == null) {
warn('Getter is missing for computed property "' + key + '".', vm);
}
if (!isSSR) {
// create internal watcher for the computed property.
// TODO: 3. 这里创建了一个computed属性所对应的Watcher监听
watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions);
}
// component-defined computed properties are already defined on the
// component prototype. We only need to define computed properties defined
// at instantiation here.
if (!(key in vm)) {
defineComputed(vm, key, userDef);
} else {
if (key in vm.$data) {
warn('The computed property "' + key + '" is already defined in data.', vm);
} else if (vm.$options.props && key in vm.$options.props) {
warn('The computed property "' + key + '" is already defined as a prop.', vm);
}
}
}
}
// 2.1 定义computed 源码4797 行
/**
*
* @param {*} target vm
* @param {*} key 我们定义的computed的key值
* @param {*} userDef 我们用户自定义的computed函数
*/
var sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
};
function defineComputed (
target,
key,
userDef
) {
// TODO:1. 是否需要缓存 若是ssr模式则不缓存
var shouldCache = !isServerRendering();
if (typeof userDef === 'function') {
sharedPropertyDefinition.get = shouldCache
? createComputedGetter(key)
: createGetterInvoker(userDef);
sharedPropertyDefinition.set = noop;
} else {
sharedPropertyDefinition.get = userDef.get
? shouldCache && userDef.cache !== false
? createComputedGetter(key)
: createGetterInvoker(userDef.get)
: noop;
sharedPropertyDefinition.set = userDef.set || noop;
}
if (sharedPropertyDefinition.set === noop) {
sharedPropertyDefinition.set = function () {
warn(
("Computed property \"" + key + "\" was assigned to but it has no setter."),
this
);
};
}
// TODO: 2. 在vm实例上面定义computed的key 描述项为经过处理getter或者setter后
// 的sharedPropertyDefinition对象
// 比如设置computed xxx属性 则我们在this.xxx会访问指向 -> sharedPropertyDefinition的getter -> 指向createComputedGetter方法
Object.defineProperty(target, key, sharedPropertyDefinition);
}
// 2.2 创建计算属性的getter 源码:4827 行
// 这里闭包缓存了key值 等待下次调用
function createComputedGetter (key) {
return function computedGetter () {
var watcher = this._computedWatchers && this._computedWatchers[key];
if (watcher) {
if (watcher.dirty) {
watcher.evaluate();
}
if (Dep.target) {
watcher.depend();
}
return watcher.value
}
}
}
/**3. initWatch 源码: 4876 行 */
function initWatch (vm, watch) {
for (var key in watch) {
// 获取当前watch配置
var handler = watch[key];
// TODO:1. 这里需要注意watch配置项的几种写法 有包含数组项 它将会逐一调用数组
// 中的每一项handler函数 实际就是针对每个handler创建watcher
if (Array.isArray(handler)) {
for (var i = 0; i < handler.length; i++) {
createWatcher(vm, key, handler[i]);
}
} else {
createWatcher(vm, key, handler);
}
}
}
// 3.1 创建watcher
/**
*
* @param {*} vm vm
* @param {*} expOrFn watch配置中的key值或者函数
* @param {*} handler 用户配置的watcher-handler函数
* @param {*} options 配置项
* @returns
*/
function createWatcher (
vm,
expOrFn,
handler,
options
) {
// TODO:1. 这里当watch配置项为对象是 则需要固定写上handler响应函数
if (isPlainObject(handler)) {
options = handler;
handler = handler.handler;
}
// TODO: 2. 若watch配置项为字符串 则表示直接调用实例的methods里面的方法 vm[handler]
if (typeof handler === 'string') {
handler = vm[handler];
}
// TODO: 3. 剩下就是配置了一个函数
return vm.$watch(expOrFn, handler, options)
}
// 3.2 原型方法$watch方法
Vue.prototype.$watch = function (
expOrFn,
cb,
options
) {
var vm = this;
if (isPlainObject(cb)) {
return createWatcher(vm, expOrFn, cb, options)
}
options = options || {};
options.user = true; // 注意这里watch给了个默认配置user
// 注意这里跟computed创建Watcher参数区别 这里expOrFn是key值 cb是用户handler
var watcher = new Watcher(vm, expOrFn, cb, options);
// TODO: 这里配置项immediate 为true时 表示 立即执行我们设置的watch监听 回调函数
if (options.immediate) {
try {
cb.call(vm, watcher.value);
} catch (error) {
handleError(error, vm, ("callback for immediate watcher \"" + (watcher.expression) + "\""));
}
}
// TODO: 返回一个取消函数 可以执行 则内部调用teardown方法
return function unwatchFn () {
watcher.teardown();
}
};