vue 关键模块Observer模块

Observer模块（以下仅个人理解，不对地方请指正）
一：基本概念
整个模块分成3个部分，
observer：数据观察者。
watcher：数据订阅者
dep：关联2者的订阅器。
关系图

                                            subscribe(订阅)
                             +-------------------------+
 Object.defineProperty去观察  |                         |
                             |                         |
                             |           （通知）          |
+-----------+             +--v-------+   notify +------+-------+
| obserser  +-----------> |    dep   +----------+    watcher   |
+-----------+             |          |          |              |
                          +----------+          +------+-------+
                                                       | update
                                                       |
                                                       |
                                                       |
                                                       +> ui

二：简单实现

2.gif

从上面图可以看到已经基本实现了observer
解剖下核心的东西
2.1 observer
value :要观察对象，
dep：订阅器，
walk函数：遍历对象观察对象上的每个属性
defineReactive函数：利用Object.defineProperty拦截对象的取值赋值操作（赋值方法里会调用dep的notify方法去通知订阅者）
这个个人觉得是核心方法了。
简单代码
2.2 dep
id：depid
subs函数：订阅内容数组
addSub函数：添加一条订阅器
removeSub函数：删除一条订阅器
notify函数：通知观察者
2.3watcher
vm：vm实例
expOrFn：观察的数据对应的属性（这里我传的都是对象）
cb：回调函数
update方法：更新方法在dep中调用

12.png

代码逻辑见上图，obsercer和dep基本实现，vue就完成了数据初始化,watcher的ui更新。从动图也能看出来这一块的简单逻辑已实现
代码大概120行左右，太丑晚点上传github
下次再看看vue的渲染