Vue2 数据响应原理图(根据自己的理解画)

途中分三步走:

一、数据在 Vue 实例化中,会调用 Observer 进行递归,将 Data 中的所有数据中的所有属性(深层次)中的 getter 和 setter 属性方法进行改写,并且每层父对象都有一个 Dep 实例(下面使用 dep 来代替),来存储父对象的属性被使用后产生的依赖(又叫订阅者)。

二、在组件上使用其中的一个属性,这里假如使用了属性  a  ,这时候Vue实例会实例化一个 Watcher, 实例化时会将该实例赋给 Dep.target (target不理解的话,请看:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target ),接着调用一个 a ,触发该属性的 getter ,getter 调用其父级 dep 中的收集依赖方法,该方法会把 Dep.target 中的实例放在一个 subs 数组中存储。接着 Dep.target 设为 null

三、a 在组件中被改变值,触发其属性 setter 。setter 调用 dep.notify 来将 dep 中的 subs 的订阅者逐一通知,订阅者收到通知后,通知组件更新。

猜你喜欢

转载自blog.csdn.net/A88552211/article/details/124454617