这里childOb.dep.depend还是没理解

来源:4-10 检测变化的注意事项

MeSKiL

2019-10-31

data(){
	return {
		msg:{
			a:1
		}
	}
}

observe(this.data)
new Observer(data)
给this.data加上了__ob__

然后walk,就是给data的属性走defineReactive

也就是给msg加上getter和setter。如果谁调用了msg就会被依赖收集,添加到msg对应的dep里去,msg被触发就会派发更新

msg的dep执行 dep.depend()

同时msg是对象,会对msg走observe(msg)
new Observer(msg) 给msg加上了__ob__,并且给了a加上了getter和setter
childOb返回值是msg.__ob__
谁调用了msg就会在

msg.__ob__.dep.depend()

我的理解是:如果msg是对象,就会执行 dep.depend() 与 msg.__ob__.dep.depend()

下面set调用了msg.__ob__.dep.depend()就触发了更新。
所以msg.__ob__其实就是专门为了Vue.Set用的。msg的dep和msg.__ob__.dep其实内容是一样的。

其实这里调用msg的dep.notify(),也同样可以触发更新,但是因为dep里只存了id,所以并找不到与msg相关联的dep。所以要用msg.__ob__.dep

老师,这个理解对嘛

写回答

1回答

ustbhuangyi

2019-10-31

childOb.dep.depend() 这个是给 Vue.set 时候用的。在 set 函数最后一句执行 ob.dep.notify() 就是手动触发一次更新。


之所以会多这个处理,是因为给对象添加一个新属性的时候是不会触发对象的 setter 的,也就没法触发对象 defineReactive 中的 dep 的 notify,但是可以通过对象.__ob__.dep.notify 通知更新

你的理解基本没问题。

1
1
MeSKiL
非常感谢!
2019-10-31
共1条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4984 学习 · 1037 问题

查看课程