Observer模块(以下仅个人理解,不对地方请指正)
一:基本概念
整个模块分成3个部分,
observer:数据观察者。
watcher:数据订阅者
dep:关联2者的订阅器。
关系图
subscribe(订阅)
+-------------------------+
Object.defineProperty去观察 | |
| |
| (通知) |
+-----------+ +--v-------+ notify +------+-------+
| obserser +-----------> | dep +----------+ watcher |
+-----------+ | | | |
+----------+ +------+-------+
| update
|
|
|
+> ui
二:简单实现
从上面图可以看到已经基本实现了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中调用
代码逻辑见上图,obsercer和dep基本实现,vue就完成了数据初始化,watcher的ui更新。从动图也能看出来这一块的简单逻辑已实现
代码大概120行左右,太丑晚点上传github
下次再看看vue的渲染