So implementieren Sie Berechnungen im Vue3-Responsive-System

Lassen Sie uns zunächst kurz einen Blick darauf werfen:

Der Kern des reaktionsfähigen Systems ist eine WeakMap --- Map --- Set-Datenstruktur.

Der Schlüssel von WeakMap ist das Originalobjekt und der Wert ist die reaktionsfähige Karte. Auf diese Weise wird bei der Zerstörung des Objekts auch die entsprechende Karte zerstört. Der Schlüssel von

Map ist jedes Attribut des Objekts, und der Wert ist eine Reihe von Effektfunktionen, die von den Attributen dieses Objekts abhängen. Verwenden Sie dann die get-Methode des Proxy-Proxy-Objekts, um die Effektfunktionen, die von den Eigenschaften des Objekts abhängen, in dem dem Schlüssel entsprechenden Set zu sammeln. Beim Ändern der Objekteigenschaften ist es außerdem erforderlich, die Set-Methode des Objekts als Proxy zu verwenden und alle Effektfunktionen des Schlüssels aufzurufen.

Im letzten Artikel haben wir basierend auf dieser Idee ein relativ vollständiges Reaktionssystem implementiert, und heute implementieren wir weiterhin Berechnungen.

Um berechnet zu implementieren

Zunächst rekonstruieren wir den vorherigen Code und trennen die Abhängigkeitssammlung und das Auslösen der Ausführung von Abhängigkeitsfunktionen in Verfolgungs- und Triggerfunktionen:

Die Logik besteht immer noch darin, Effekte hinzuzufügen entsprechendes SetSowie die Ausführung der Effektfunktion im entsprechenden Set auslösen, aber es ist viel klarer, sie zu extrahieren.

Dann rechnerisch weiter umsetzen. Die Verwendung von

computed sieht ungefähr so ​​aus:

const value = computed(() => {
    return obj.a + obj.b;
});

Vergleichen Sie den Effekt:

effect(() => {
    console.log(obj.a);
});

Der Unterschied ist nur ein weiterer Rückgabewert.

Also implementieren wir die auf dem Effekt basierende Berechnung wie folgt:

function computed(fn) {
    const value = effect(fn);
   return value
}

Natürlich hat der aktuelle Effekt keinen Rückgabewert, wir müssen ihn hinzufügen:

Er basiert nur auf der vorherigen Ausführung des Effektfunktion Zeichnen Sie den Rückgabewert auf und geben Sie ihn zurück. Diese Transformation ist immer noch sehr einfach.

Jetzt kann die Berechnung den berechneten Wert zurückgeben:

Aber jetzt, nachdem die Daten übergeben wurden, werden alle Effekte ausgeführt, und die hier berechneten Effekte müssen nicht jedes Mal erneut ausgeführt werden, sondern werden nur ausgeführt nachdem sich die Daten geändert haben.

Also fügen wir eine Lazy-Option hinzu, um zu steuern, dass der Effekt nicht sofort ausgeführt wird, sondern die Funktion zurückgibt und der Benutzer sie selbst ausführen lässt.

Wenn Sie dann den Effekt in der Berechnung verwenden, fügen Sie eine Lazy-Option hinzu, damit die Effektfunktion nicht ausgeführt wird, sondern zurückkehrt.

? Das Attribut kann den berechneten Wert abrufen, und nach dem Ändern von obj.a. wird die Berechnungsfunktion erneut ausgeführt, und der neue Wert kann erhalten werden, wenn der Wert erneut erhalten wird.

Führen Sie einfach eine weitere Berechnung durch. Dies liegt daran, dass alle Effektfunktionen ausgeführt werden, wenn sich obj.a ändert:

Auf diese Weise wird die berechnete Funktion bei jeder Änderung der Daten erneut ausgeführt, um sie zu berechnen der neueste Wert.

Dies ist nicht notwendig. Ob die Effektfunktion ausgeführt wird oder nicht, sollte kontrollierbar sein. Daher müssen wir die Planungsfunktion hinzufügen:

kann die Übergabe der Rückruffunktion des Schdulers unterstützen. Wenn es dann einen Planer gibt, übergeben Sie ihn beim Ausführen des Effekts an diesen und lassen Sie ihn vom Benutzer planen sich selbst, andernfalls wird die Effektfunktion ausgeführt.

Damit Benutzer die Ausführung der Effektfunktion selbst steuern können:

Dann probieren Sie einfach den Code aus:

Sie können sehen, dass der Effekt nach obj.a nicht ausgeführt wird Funktion zur Neuberechnung geändert, da wir einen Zeitplaner hinzugefügt haben, um dies selbst zu planen. Dadurch entfällt die Notwendigkeit, die berechnete Funktion unmittelbar nach den Datenänderungen auszuführen, und Sie können die Ausführung selbst steuern.

Jetzt gibt es ein weiteres Problem: Der Res.-Wert muss bei jedem Zugriff berechnet werden:

能不能加个缓存呢？只有数据变了才需要计算，否则直接拿之前计算的值。

当然是可以的，加个标记就行：

scheduler 被调用的时候就说明数据变了，这时候 dirty 设置为 true，然后取 value 的时候就重新计算，之后再改为 false，下次取 value 就直接拿计算好的值了。

我们测试下：

我们访问 computed 值的 value 属性时，第一次会重新计算，后面就直接拿计算好的值了。

修改它依赖的数据后，再次访问 value 属性会再次重新计算，然后后面再访问就又会直接拿计算好的值了。

至此，我们完成了 computed 的功能。

但现在的 computed 实现还有一个问题，比如这样一段代码：

let res = computed(() => {
    return obj.a + obj.b;
});
effect(() => {
    console.log(res.value);
});

我们在一个 effect 函数里用到了 computed 值，按理说 obj.a 变了，那 computed 的值也会变，应该触发所有的 effect 函数。

但实际上并没有：

这是为什么呢？

这是因为返回的 computed 值并不是一个响应式的对象，需要把它变为响应式的，也就是 get 的时候 track 收集依赖，set 的时候触发依赖的执行：

我们再试一下：

现在 computed 值变了就能触发依赖它的 effect 了。至此，我们的 computed 就很完善了。

完整代码如下：

const data = {
    a: 1,
    b: 2
}
let activeEffect
const effectStack = [];
function effect(fn, options = {}) {
  const effectFn = () => {
      cleanup(effectFn)
      activeEffect = effectFn
      effectStack.push(effectFn);
      const res = fn()
      effectStack.pop()
      activeEffect = effectStack[effectStack.length - 1]
      return res
  }
  effectFn.deps = []
  effectFn.options = options;
  if (!options.lazy) {
    effectFn()
  }
  return effectFn
}
function computed(fn) {
    let value
    let dirty = true
    const effectFn = effect(fn, {
        lazy: true,
        scheduler(fn) {
            if(!dirty) {
                dirty = true
                trigger(obj, 'value');
            }
        }
    });
    const obj = {
        get value() {
            if (dirty) {
                value = effectFn()
                dirty = false
            }
            track(obj, 'value');
            console.log(obj);
            return value
        }
    }
    return obj
}
function cleanup(effectFn) {
    for (let i = 0; i < effectFn.deps.length; i++) {
        const deps = effectFn.deps[i]
        deps.delete(effectFn)
    }
    effectFn.deps.length = 0
}
const reactiveMap = new WeakMap()
const obj = new Proxy(data, {
    get(targetObj, key) {
        track(targetObj, key);

        return targetObj[key]
   },
   set(targetObj, key, newVal) {
        targetObj[key] = newVal

        trigger(targetObj, key)
    }
})
function track(targetObj, key) {
    let depsMap = reactiveMap.get(targetObj)
    if (!depsMap) {
    reactiveMap.set(targetObj, (depsMap = new Map()))
    }
    let deps = depsMap.get(key)
    if (!deps) {
    depsMap.set(key, (deps = new Set()))
    }
    deps.add(activeEffect)
    activeEffect.deps.push(deps);
}
function trigger(targetObj, key) {
    const depsMap = reactiveMap.get(targetObj)
    if (!depsMap) return
    const effects = depsMap.get(key)
    const effectsToRun = new Set(effects)
    effectsToRun.forEach(effectFn => {
        if(effectFn.options.scheduler) {
            effectFn.options.scheduler(effectFn)
        } else {
            effectFn()
        }
    })
}

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Berechnungen im Vue3-Responsive-System. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!