方法执行时机
在beforeCreate之后,created之前,会initState
initState中会调用initWatch
源码分析
initWatch
这段代码只是简单的进行遍历,然后每个watch都使用createWater进行处理
createWatcher
- 获取到监听回调
- 调用vm.$watch
$watch
vm.$watch做了主要的两件事
- 为每个watch配发watcher;
- 根据immediate配置来判断是否立即执行监听回调
watcher
新建watcher的时候主要做了以下几件事情:
- 监听的 key
- 监听回调 (Watch 中的cb)
- 监听配置的options
getter
Watch中this.getter的本质是为了获取对象的key值对应的get方法,getter是在watcher.get中执行的:
深度监听
traverse
traverse方法很好理解,主要做的事情是:
- 通过读取,就可以让这个属性收集到 watch-watcher;
- 深层级的对象,其中的每个属性也都是响应式的,每个属性都有自己的依赖收集器,通过不断深入的读取每个属性,这样每个属性就都可以收集到 watch-watcher 了;这样不管对象内多深的属性变化,都会通知到 watch-watcher,于是这样就完成了深度监听;
update
监听的数据变化的时候,就能通知 watch-watcher 更新,所谓通知更新,就是手动调用 watch.update
vue系列课程
最近会陆续的对vue进行源码分析,一系列课程如下: