Vue响应式原理——初体验

发布-订阅模式(观察者模式)

首先,不要被发布-订阅者模式这个鬼名字给整蒙了,由于最开始我没整明白,发布者、订阅者、观察者等等术语,导致看了很多Dep和Watcher的文章,却被不同名字绕得云里雾里,后来看了一位博主的概括,豁然开朗。博主的博文地址

概念:

发布-订阅模式又称为观察者模式,它定义的是一种一对多的依赖关系,当一个状态发生改变的时候,所有依赖这个状态的对象都会得到通知。

观察者订阅者 描述的是同一个东西——watcher,下面的图,清晰的表达了这句话,感谢另一位博主。这里献上他的地址


关于Object.defineProperty()用法:

Object.defineProperty( Obj,“属性名”,{ } )     ———————   { } 是descriptor,里边用于定义属性的特性


数据劫持 / Observer():

  Vue实例中data选项的属性,在初始化的时候,就被Observer(),利用for...in遍历,如果属性的类型不是对象,那么就给属性定义setter和getter回调函数,后续属性被读取 / 重置时,getter / setter方法被触发,函数里的代码执行,就会通知到Dep。

  若是getter被调用,那么读取这个属性的watcher就是依赖于这个属性的,然后通过getter收集到的依赖,都存放在Dep中。 

  若是setter被调用,那么Dep就会通知之前注册了依赖的watcher,去执行他们的update(),进行re-render!

关于最后的总结:还是引用上面第二位博主的结论,我觉得他的这个流程很清晰易懂


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容