从图解来理解vue设计的双向绑定架构图

先看别人绘制的图

我的手绘图

其实一共是3+1+view渲染模块
3：
observer:监听器 vue2.0 用Object.defineProty、vue3.0 用proxy
watcher:订阅器
compile:解析器
Dep：订阅器收集器
view：渲染dom

通过看图，先找有几条通路
a、observer-->Dep-->watcher-->view
b、compile-->watcher-->Dep
c、compile-->view

c路径是最简单的，c主要实现是解析指令如v-model等，初始化到view视图层。

b路径compile-->watcher 形成初始化的订阅器，watcher-->Dep订阅器被添加到订阅器容易里，这里实际是在observer 阶段eg：vue2.0的Object.defineProty的get方法的时候被添加的,但为何没有observer这个回路呢？设计者用了一个兼容的写法，强制执行了data监听器的observer方法里Object.defineProty的get方法。

a路径observer-->Dep-->watcher 是通知变化，此阶段eg: vue2.0的Object.defineProty的set方法触发的，最后watcher-->view 变化反应到view层

不难发现，到能到底view层的就只有complie和watcher，一个是模板初始化到view层，一个是update后更新到view层

理解了这个回路，然后再逐一去理解回路实现的逻辑就很容易理解和记忆了。