Heim > Artikel > Web-Frontend > Interpretieren Sie, wie Vue Daten reaktiv verpackt, um einen MDV-Effekt zu erzielen
In diesem Artikel geht es darum, wie Vue Daten reaktiv verpackt, um den MDV-Effekt (Model-Driven-View) zu erzielen. Ich hoffe, dass er für alle hilfreich ist.
Erklären Sie zunächst, was reaktiv ist: Wenn sich die Daten ändern, können wir sie spüren.
Der relevante Implementierungscode von Vue befindet sich vollständig im Verzeichnis core/observer
. Wenn Sie ihn selbst lesen möchten, wird empfohlen, mit core/instance/index.js. <code>core/observer
目录下,而要自行阅读的话,建议从 core/instance/index.js
中开始。
在开始讲 reactive 的具体实现之前,先说说几个对象:Watcher、Dep、Observer。
Watcher 是 vue 实现的一个用于观测数据的对象,具体实现在 core/observer/watcher.js
中。
这个类主要是用来观察方法/表达式
中引用到的数据(数据需要是 reative 的,即 data 或者 props)变更,当变更后做出相应处理。先看一下 Watcher 这个类的入参:
vm: Component,expOrFn: string | Function,cb: Function,options?: Object
解释一下这几个入参是干嘛的:
abc.bbc.aac
这种类型的字符串(由于 vue 的 parsePath 方法是用 split('.') 来做的属性分割,所以不支持abc['bbc']
)。expOrFn 如果是方法,则直接赋值给 watcher 的 getter 属性,如果是表达式,则会转换成方法再给 getter。deep
、user
,lazy
,sync
,这些值默认都是为 false。dirty
,当该 computed data 被引用的时候才会执行从而返回新的 computed data,从而减少计算量。了解了入参是用来干嘛的之后,也就基本上知道 Watcher 这个对象干了啥。
Dep 则是 vue 实现的一个处理依赖关系的对象,具体实现在 core/observer/dep.js
中,代码量相当少,很容易理解。
Dep 主要起到一个纽带的作用,就是连接 reactive data 与 watcher,每一个 reactive data 的创建,都会随着创建一个 dep 实例。参见 observer/index.js 中的defineReactive
方法,精简的 defineReactive 方法如下。
function defineReactive(obj, key, value) { const dep = new Dep(); Object.defineProperty(obj, key, { get() { if (Dep.target) { dep.depend(); } return value } set(newValue) { value = newValue; dep.notify(); } })}
创建完 dep 实例后,就会给该 data 注入 getter 和 setter 的逻辑,当该 data 被引用的时候,就会触发 getter,而什么时候 data 会被引用呢?就是在 watcher 执行 getter 的时候,而当 watcher 执行 getter 的时候,watcher 会被塞入 Dep.target,然后通过调用 dep.depend() 方法,这个数据的 dep 就和 watcher 创建了连接。
创建连接之后,当 data 被更改,触发了 setter 逻辑。然后就可以通过 dep.notify() 通知到所有与 dep 创建了关联的 watcher。从而让各个 watcher 做出响应。
比如我 watch 了一个 data ,并且在一个 computed data 中引用了同一个 data。再同时,我在 template 中也有显式引用了这个 data,那么此时,这个 data 的 dep 里就关联了三个 watcher,一个是 render function 的 watcher,一个是 computed 的 watcher,一个是用户自己调用 $watch 方法创建的 watcher。当 data 发生更改后,这个 data 的 dep 就会通知到这三个 watcher 做出相应处理。
Observer 可以将一个 plainObject 或者 array 变成 reactive 的。代码很少,就是遍历 plainObject 或者 array,对每一个键值调用defineReactive
Watcher ist ein von Vue implementiertes Objekt zur Beobachtung von Daten. Die spezifische Implementierung befindet sich in core/observer/watcher.js
.
Diese Klasse wird hauptsächlich verwendet, um Änderungen in den Daten zu beobachten, auf die in Methode/Ausdruck
verwiesen wird (die Daten müssen reaktiv sein, d. h. Daten oder Requisiten) und sie nach der Änderung entsprechend zu behandeln. Werfen wir zunächst einen Blick auf die Eingabeparameter der Watcher-Klasse:
observe(data, true)🎜Erklären Sie, wozu diese Eingabeparameter dienen: 🎜
abc.bbc.aac
(da die parsePath-Methode von vue dazu split('.') verwendet Attributsegmentierung, daher wird abc['bbc']
nicht unterstützt). Wenn expOrFn eine Methode ist, wird sie direkt dem Getter-Attribut des Watchers zugewiesen. Wenn es sich um einen Ausdruck handelt, wird er in eine Methode konvertiert und dann dem Getter übergeben. deep
, user
, lazy
, sync
, diese Werte sind standardmäßig auf false gesetzt. dirty
übergeben und wird nur ausgeführt, wenn auf die berechneten Daten verwiesen wird, um neue berechnete Daten zurückzugeben, wodurch der Berechnungsaufwand reduziert wird. core/observer/dep.js
. Die Codemenge ist recht gering und sehr komplex. 🎜🎜Dep dient hauptsächlich als Link und verbindet reaktive Daten und Beobachter. Bei jeder Erstellung reaktiver Daten wird eine Dep-Instanz erstellt. Siehe die Methode defineReactive
in Observer/index.js. Die vereinfachte Methode defineReactive lautet wie folgt. 🎜function initComputed (vm: Component, computed: Object) { ... const watchers = vm._computedWatchers = Object.create(null) for (const key in computed) { const userDef = computed[key] let getter = typeof userDef === 'function' ? userDef : userDef.get ... watchers[key] = new Watcher(vm, getter, noop, { lazy: true }) if (!(key in vm)) { defineComputed(vm, key, userDef) } else if (process.env.NODE_ENV !== 'production') { ... } }}🎜Nachdem die Dep-Instanz erstellt wurde, wird die Logik von Getter und Setter in die Daten eingefügt. Wenn auf die Daten verwiesen wird, wird der Getter ausgelöst. Das heißt, wenn der Beobachter den Getter ausführt, und wenn der Beobachter den Getter ausführt, wird der Beobachter in Dep.target gestopft, und dann wird durch Aufrufen der dep.depend()-Methode die Dep dieser Daten eine Verbindung mit dem herstellen Beobachter. 🎜🎜Nachdem die Verbindung erstellt wurde und Daten geändert werden, wird die Setter-Logik ausgelöst. Anschließend können Sie alle mit dep verbundenen Beobachter über dep.notify() benachrichtigen. Dadurch kann jeder Beobachter reagieren. 🎜🎜Zum Beispiel schaue ich mir Daten an und verweise in berechneten Daten auf dieselben Daten. Gleichzeitig habe ich in der Vorlage auch explizit auf diese Daten verwiesen, sodass die Dep dieser Daten zu diesem Zeitpunkt drei Beobachtern zugeordnet ist, einer ist der Beobachter der Renderfunktion, der andere ist der Beobachter der berechneten Funktion und der andere ist der Beobachter der berechneten Funktion other ist der Benutzer, der $ aufruft. Der von der Watch-Methode erstellte Watcher. Wenn sich Daten ändern, benachrichtigt die Abteilung dieser Daten diese drei Beobachter, damit sie entsprechend damit umgehen können. 🎜
defineReactive
für jeden Schlüsselwert auf. 🎜🎜Prozess🎜🎜Nachdem die oben genannten drei Klassen vorgestellt wurden, sollten Sie grundsätzlich ein vages Verständnis der Implementierung von Vue Reactive haben. Lassen Sie uns als Nächstes anhand von Beispielen über den gesamten Prozess sprechen. 🎜🎜Wenn Vue instanziiert wird, wird zuerst initData aufgerufen, dann initComputed und schließlich wird mountComponent aufgerufen, um den Watcher der Renderfunktion zu erstellen. Damit ist die Datenreaktivität einer VueComponent abgeschlossen. 🎜initData 方法在 core/instance/state.js 中,而这个方法里大部分都是做一些判断,比如防止 data 里有跟 methods 里重复的命名之类的。核心其实就一行代码:
observe(data, true)
而这个 observe 方法干的事就是创建一个 Observer 对象,而 Observer 对象就像我上面说的,对 data 进行遍历,并且调用 defineReactive 方法。
就会使用 data 节点创建一个 Observer 对象,然后对 data 下的所有数据,依次进行 reactive 的处理,也就是调用 defineReactive
方法。当执行完 defineReactive 方法之后,data 里的每一个属性,都被注入了 getter 以及 setter 逻辑,并且创建了 dep 对象。至此 initData 执行完毕。
然后是 initComputed 方法。这个方法就是处理 vue 中 computed 节点下的数据,遍历 computed 节点,获取 key 和 value,创建 watcher 对象,如果 value 是方法,实例化 watcher 的入参 expOrFn 则为 value,否则是 value.get。
function initComputed (vm: Component, computed: Object) { ... const watchers = vm._computedWatchers = Object.create(null) for (const key in computed) { const userDef = computed[key] let getter = typeof userDef === 'function' ? userDef : userDef.get ... watchers[key] = new Watcher(vm, getter, noop, { lazy: true }) if (!(key in vm)) { defineComputed(vm, key, userDef) } else if (process.env.NODE_ENV !== 'production') { ... } }}
我们知道 expOrFn 是可以为方法,也可以是字符串的。因此,通过上面的代码我们发现了一种官方文档里没有说明的用法,比如我的 data 结构如下
{ obj: { list: [{value: '123'}] } }
如果我们要在 template 中需要使用 list 中第一个节点的 value 属性 值,就写个 computed:
computed: { value: { get: 'obj.list.0.value' }}
然后在 template 中使用的时候,直接用{<!-- -->{ value }}
,这样的话,就算 list 为空,也能保证不会报错,类似于 lodash.get 的用法。OK,扯远了,回到正题上。
创建完 watcher,就通过 Object.defineProperty 把 computed 的 key 挂载到 vm 上。并且在 getter 中添加以下逻辑
if (watcher.dirty) { watcher.evaluate() } if (Dep.target) { watcher.depend() } return watcher.value
前面我有说过,computed data 的 watcher 是 lazy 的,当 computed data 中引用的 data 发生改变后,是不会立马重新计算值的,而只是标记一下 dirty 为 true,然后当这个 computed data 被引用的时候,上面的 getter 逻辑就会判断 watcher 是否为 dirty,如果是,就重新计算值。
而后面那一段watcher.depend
。则是为了收集 computed data 中用到的 data 的依赖,从而能够实现当 computed data 中引用的 data 发生更改时,也能触发到 render function 的重新执行。
depend () { let i = this.deps.length while (i--) { this.deps[i].depend() } }
把 data 以及 computed 都初始化好之后,则创建一个 render function 的 watcher。逻辑如下:
export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean): Component { vm.$el = el ... callHook(vm, 'beforeMount') let updateComponent ... updateComponent = () => { vm._update(vm._render(), hydrating) } ... vm._watcher = new Watcher(vm, updateComponent, noop) if (vm.$vnode == null) { vm._isMounted = true callHook(vm, 'mounted') } return vm}
可以看到,创建 watcher 时候的入参 expOrFn 为 updateComponent 方法,而 updateComponent 方法中则是执行了 render function。而这个 watcher 不是 lazy 的,因此创建该 watcher 的时候,就会立马执行 render function 了,当执行 render function 的时候。如果 template 中有使用 data,则会触发 data 的 getter 逻辑,然后执行 dep.depend() 进行依赖收集,如果 template 中有使用 computed 的参数,也会触发 computed 的 getter 逻辑,从而再收集 computed 的方法中引用的 data 的依赖。最终完成全部依赖的收集。
最后举个例子:
<template> <p>{{ test }}</p></template><script> export default { data() { return { name: 'cool' } }, computed: { test() { return this.name + 'test'; } } }</script>
【相关推荐:《vue.js教程》】
Das obige ist der detaillierte Inhalt vonInterpretieren Sie, wie Vue Daten reaktiv verpackt, um einen MDV-Effekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!