day98-双向绑定中的依赖收集-浅浅浅析

前言

vuejs-双向绑定中的Dep.target(即依赖收集)要从双向绑定思路说起(这里的双像绑定当然指的是vuejs的数据劫持+发布者-订阅者模式)。


model-view-viewmodel实现思路

首先要实现Observer,监听属性变动(数据劫持)。实现时将observe的对象进行递归遍历,包括子属性对象的属性,都加上setter和getter,使其都能监听数据变化(用递归)。
监听变化之后?通知订阅者
用一个数组来收集订阅者,数据变动就通知(notify()),之后再进行更新(update())。
谁是订阅者?如何往订阅器中添加订阅者?
通过dep(即dependency)来添加订阅者(Watcher),但是dep要在监听变化时通知订阅者。那么就可能需要闭包操作(Dep.target,即可以在Dep定义一个全局target属性),在监听时检测到数据就在闭包内暂存watcher
Watcher
Watcher订阅者作为Oberver和Compile之间通信的桥梁
自身实例化时往属性订阅器(dep)里面添加自己
自己有一个update() 方法,等属性变动时属性订阅器通知再调用update()方法,触发COmplie中绑定的回调。
Dep.target
在watcher中的get方法时。会用到依赖收集。

Dep.target = this;	// 将当前订阅者指向自己
let value = this.obj[key]; // 触发getter,添加自己到属性订阅器中
Dep.target = null; // 添加完毕,重置

实例化Watcher时,调用get()方法,通知Dep.target = watcherInstance标记订阅者时当前watcher实例
可以触发属性定义的getter方法,然后在属性的订阅器dep添加当前watcher实例(即将当前订阅者指向自己)
使得属性值变化的时候,watcherInstance收到更新通知。
一个基本的思路大概就是这些,一步步建立起来的逻辑。可能有些地方还没有理清楚,需要再加深理解。

文章作者: lmislm
文章链接: http://lmislm.com/2019/04/20/2019-04-20/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog