实现观察者Watcher和依赖收集器Dep

2020-04-06  本文已影响0人  仔崽06

依赖收集器(Dep)需实现两个功能

1.添加订阅者watcher,收集依赖.

2.当数据发生变化通知watcher去更新.

实现过程:

创建一个Dep类,一个方法去订阅添加watcher观察者(addsub),另一个方法(notify)当数据变化找到对应的观察者,去通知更新对应的视图。

其次创建一个观察者Watcher类,将MVue这个类传入进去,属性,已经回调函数传入并赋值,创建getOldVal方法获取旧的值,并将旧值返回出去。update比对下旧值和修改新值有没有变化,如果有变化将新值通过回调传入.订阅观察者往dep中存放 需要一个数据,添加一个观察者,所以需要每添加一个观察者,将dep.target绑定当前的观察者,订阅之后取消设置为null,防止同一个数据绑定多个相同重复的观察者.

目前只实现了通过dep订阅观察者,dep发生改变通知对应的观察者进行视图更新.

之后需要将observer将dep关联起来,订阅数据变化,将往dep添加观察者,收集依赖,如果数据变化时告诉dep去通知变化.

接下来将compile与watcher关联起来绑定更新函数.

以下为v-html进行示例:在解释器解析指令绑定数据初始化更新视图的同时,添加对应的Watcher接受修改新值,绑定对应的回调,进行视图更新.

具体实现思路:当数据劫持获取getter的时候,订阅器dep添加每个数据对应的观察者,在修改数据得时候会告诉dep去通知数据变化.观察者会拿到新值与旧值对比看是否需要更新.如果需要更新,将cb(新值),解释器compile在解析指令,初始化数据的同时给观察者绑定对应的更新函数.

以下效果:

目前只实现了数据修改发生了视图变化.

下节:实现数据双向绑定https://www.jianshu.com/p/d597bef9eee9

上一篇 下一篇

猜你喜欢

热点阅读