vue源码 observe watch dep之间的关系 ---三分一把刀

我是三分一把刀。

基本上现在mvvm框架的实现都基于Object.defineProperty,这个方法给属性定义了get与set方法,从而使很多逻辑可以实现。proxy是es6的

observe,watch,dep之间的关系。

observe监测属性,比如data定义的属性,将属性通过defineReactive,然后再get方法内部,会将属性的watcher保存在属性的dep的内部属性数组内。

dep是响应式属性的方法内部的一个闭包,可以理解成为该属性关联的一个对象,而dep内部保留着属性的watcher,只要调用属性的set方法,属性值改变就会调用到dep.notify,从而依次调用内部保留的watcher的update方法,从而更新页面

watcher,顾名思义,是个订阅者,当监听到订阅消息就会做出自己的反应,这里包含更新页面。



主要是订阅发布者模式 dep为调度中心,watcher为订阅者,data修改为事件发布者

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容