关于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 层

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