Vue源码中Observer-Dep-Watcher所有属性函数功能意义解析(脑图)

备注展示不出来在这里补充：

Dep:存储data中每层对象的属性（依赖），如果data属性存在对象，那么该对象也会新建一个Dep

Dep主要记录每一个依赖属性，一般为vm.$data中的，也可以用vm.$set设置。
在属性的getter中会把使用这个依赖的Watcher记录在Dep.subs中

Watcher:观察者负责计算属性，watch监听和renderWatcher(页面更新)的依赖收集和更新

全局只有3处new Watcher:
1：mountComponent-->定义渲染函数
2：inintComputed
3：initWatch
分别用于渲染更新、计算属性、监听属性。
分析知道其主要用于解析所观察的表达式来收集依赖，如对应上面的用途：
1：渲染函数的依赖
2：计算函数的依赖
3：监听函数的依赖

Observer:为所有data中的数据设置getter和setter,依赖收集由watcher发起（watcher的get函数），再Observer执行（每个属性的getter中调用dep.depend()）

主要用于遍历所有data中的属性，通过Object.defineProperty为其添加getter和setter。
在getter中每个属性会new Dep来被记录为一个依赖。data中的数据会被页面，computed，watch调用，然后被添加到对应的Watcher中作为Watcher的依赖被记录到Watcher.deps和Watcher.newDeps。同时该依赖Dep也会把订阅的自己的Watcher添加到Dep.subs中。在setter中会调用Dep.notify通知该依赖已发生变化，非生产环境且不为异步需要将subs的Watcher排序，然后逐一调用

有不清楚的或者错误的地方，欢迎讨论

附上vue简易实现：https://blog.csdn.net/qq_41245969/article/details/112217699