关于javascript:从图解来理解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层

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