依赖收集器(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







网友评论