Vue 响应式原理

一、设计模式

  Vue 通过 数据劫持结合发布者-订阅者模式 的方式实现数据的响应式,通过 Object.defineProperty 来劫持数据的 getter、setter,在数据变动时发布消息给订阅者,订阅者收到消息后进行相应的处理。

  看下图:

  

  上图共设计到5个概念:data,view,Observer,Dep,Watcher

  重点是Observer,Dep,Watcher

  Observer:数据观察者,让数据对象的读写操作处于自己的监管之下。当初始化实例的时候,会递归遍历data,用 Object.defineProperpy 来拦截数据(包括数组里的每个数据)。

  Dep:数据更新的发布者,get 数据的时候,收集订阅者,触发 Watcher 的依赖收集;set数据的时候,发布更新,通知 Watcher

  Watcher:数据更新的订阅者,订阅的数据改变时执行响应的回调函数(更新视图或者表达式的值)。

  图中红色箭头代表 收集依赖时获取数据的流程。Watcher会收集依赖的时候(这个时机可能是实例创建时,解析模板、初始化watch、初始化computed,也可能是数据改变后,Watcher执行回调函数前),会获取数据的值,此时Observer会拦截数据(即调用get函数),然后通知Dep可以收集订阅者啦。Dep将订阅数据的Watcher保存下来,便于后面通知更新。

  图中绿色箭头代表数据改变时,发布更新的流程。当数据改变时,即设置数据时,此时Observer会拦截数据(即调用set函数),然后通知Dep,数据改变了,此时Dep通知Watcher,可以更新视图啦。

  

  官方实例图:

  

详见 https://www.jianshu.com/p/1032ecd62b3a
感谢博主分享!


原文地址:https://www.cnblogs.com/gaosirs/p/10600647.html