我是这么理解Vue中的响应式系统的

1,369 阅读2分钟

遇到知识,尤其是复杂的概念,我不能类比的话,我很难接收(所以学习很差...)。在看了大神染陌同学的Vue源码解析后,我想分享一下我所类比的Vue响应式系统,您得先看他的文章(至少看他写的Vue的响应式)。

这是我自己的想法,或许适合您,或许也不适合您,还望多多指点。本文没有代码。

在此之前就当您看过《生化危机》。

我是这样理解vue中的响应式系统原理的: 

new Vue({options}),就像《生化危机》中的世界,Vue中的data里的数据就像每一个与这个世界有必然接触的生物(无论你是爱丽丝、丧史、还是丧狗)只要你与这个世界产生了互动,你都会被Vue内部的一个庞大团体‘保护伞公司’(对应Vue源码中的observer)所影响,


它可以观察一切生物。保护伞公司通过遍布全球的基地“就拿内达华沙漠中的地下实验室”(对应Vue中的defineReactive)对区域范围内的生物进行监控(让生物变成可观察的)。


而这一基地具体的操控者又是“艾萨克博士”(对应Vue中的Object.defineprototy)。 Object.defineprototy方法中的3个参数(且说3个),入参是一个obj(他是生物中的一个个体,就像爱丽丝),第二个参数key就像爱丽丝的技能点——是用枪、还是用土耳其军刀,第三个参数vaule是对应技能点的值。 艾萨克博士对每一个‘实验品’进行改造(他们是丧尸、是爱丽丝的克隆体、还更有爱丽丝本人,但他们都是data)。

艾萨克博士(Object.defineprototy)通过reactiveGetter对每一个data(生物,丧尸...)进行基因读取(这一个过程包括Vue中的“依赖收集”)。


通过reactiveSetter对每一个data进行写(就像基因改造,就像《生化3》中改造爱丽丝的克隆体)。 reactiveGetter时,主要是对data进行依赖收集,这一点很中重要(这关乎着为什么Vue中的数据发生改变,其view层也会改变)。

这个重要是如何维护的呢? 首先,依赖收集会让“可观察的”data知道,‘有地方依赖我的数据,我变化时要通知他们’。这个时候“红皇后”登场了,红皇后她(利用强大AI技术)能监视每一个生物(data)的信息,她就像Vue中的订阅者Dep。


红皇后能够为保护伞公司的那些利益集团高层(就像Vue中的Watcher)提供一切信息。


但她首先得知道哪些人是高层(这就像订阅者Dep有一个功能addSub用来存放Watcher观察者对象)。红皇后会在得知依赖收集对象发生改变(data数据变化)时通知这帮Watcher,对象视图要更新了...