vue源码解析pdf_Vue源码解析三-数据监听及diff算法浅析

数据监听(props同理):

下图已经很清楚的告诉我们数据监听是怎么做的了。简而言之，初始化的时候initData将data数据赋值给data，后续监听都是操作_data。重点是它这里如何与视图联系起来的呢？其实前文也提到过,在render触发时会访问vm.xx。监听调用getter方法判断Dep.target (其实就是Watcher)存在就Dep.depend添加Watcher

Watcher:

观察者会当前实例的updateComponent保存起来，方便数据变化时调用vm.update更新视图。也就是说每个和视图有关的data都会绑定它的相关的Wacher。如果你写的单文件组件（我没用vue的jsx测试过，就不做讨论了），这个Watcher就是整个组件的_render。这样可能会导致性能问题。尤其是有子组件的时候这个问题更大了

Diff：

就是一个判断新老Vnode是否相同且不断的遍历子Vnode的过程

_update和diff