Analyse des Vue3-Reaktionsprinzips und des API-Schreibens

Vorwort

Vue3-Reaktionsprinzip plus API-Schreiben, verstehen Sie schnell das Vue3-Reaktionsprinzip

GitHub-Blog: https://github.com/jiejiangzi/blog/issues/8

Vue3-Reaktionsprinzip Implementierung

Schreiben Sie zunächst einen Code, um zu sehen

Implementieren Sie den Effekt

var name = 'sl', age = 22;
effect1 = () => `我叫${name}，今年${age}岁`
effect2 = () => `我叫${name}，今年${age+1}岁`
console.log(effect1()) //我叫sl，今年22岁
console.log(effect2()) //我叫sl，今年23岁
age = 30;
console.log(effect1())  //我叫sl，今年30岁
console.log(effect2())  //我叫sl，今年31岁

und prüfen Sie, ob es Punkte gibt, die optimiert werden können?

Zuallererst: Mehrere Funktionen, nachdem sich das Alter geändert hat, müssen Sie mehrere Funktionen erneut manuell aufrufen, um die neuesten Informationen zu erhalten

Ich hoffe, dass mehrere Funktionen automatisch aufgerufen werden können, nachdem die Informationen geändert wurden

So implementieren Sie es

Ich kann mir viele vorstellen. Speichern Sie die Funktionen zusammen und speichern Sie sie in der Gather-Funktion. Wenn sich das Alter ändert, können Sie Trigger für mehrere Funktionen aufrufen.

Gather und Trigger implementieren Das kann optimiert werden

Wenn es sich bei der Variablen um einen Umgang mit Objekten oder mehreren Objekten handelt

Legen Sie den Speicher fest, wenn die Variable ein primitiver Typ ist
Wenn die Variable ein Objekt ist, können Sie Map zum Speichern verwenden
Wenn mehrere Objekte vorhanden sind, verwenden Sie schwachMap zum Speichern

• var name = "sl",
    age = 22;
  var tom, joy;
  effect1 = () => (tom = `我叫${name}，今年${age}岁`);
  effect2 = () => (joy = `我叫${name}，今年${age + 1}岁`);
  var dep = new Set();
  function gather() {
    dep.add(effect1);
    dep.add(effect2);
  }
  function trigger() {
    dep.forEach((effect) => effect());
  }
  gather();
  effect1()
  effect2()
  console.log(tom); //我叫sl，今年22岁
  console.log(joy); //我叫sl，今年23岁
  age = 30;
  trigger()
  console.log(tom); //我叫sl，今年30岁
  console.log(joy); //我叫sl，今年31岁

Sehen Sie weiterhin, welche Punkte optimiert werden können

Die oben genannten Auslöser für Sammlungserfassung und Funktionsaktualisierungsbenachrichtigungen werden manuell erfasst und jedes Mal aktualisiert Gibt es eine Möglichkeit, automatisch zu sammeln und auszulösen? Das heißt, es gibt eine fest codierte Dep-Additionsfunktion in der Gather-Funktion. Wie kann man das Problem lösen? Verwenden Sie ref in vue3.

var obj1 = { name: "tom", age: 22 };
var obj2 = { name: "joy", age: 23 };
var tom, joy;
effect1 = () => (tom = `我叫${obj1.name}，今年${obj1.age}岁`);
effect2 = () => (joy = `我叫${obj2.name}，今年${obj2.age}岁`);
var depsMap = new WeakMap();
function gather(target, key) {
  let depMap = depsMap.get(target);
  if (!depMap) {
    depsMap.set(target, (depMap = new Map()));
  }
  let dep = depMap.get(key);
  if (!dep) {
    depMap.set(key, (dep = new Set()));
  }
  if (target === obj1) {
    dep.add(effect1);
  } else {
    dep.add(effect2);
  }
}
function trigger(target, key) {
  let depMap = depsMap.get(target);
  if (depMap) {
    const dep = depMap.get(key);
    if (dep) {
      dep.forEach((effect) => effect());
    }
  }
}
gather(obj1, "age");//收集依赖
gather(obj2, "age");//收集依赖
effect1();
effect2();
console.log(tom); //我叫sl，今年22岁
console.log(joy); //我叫sl，今年23岁
obj1.age = 30;
obj2.age = 10;
trigger(obj1, "age");
trigger(obj2, "age");
console.log(tom); //我叫sl，今年30岁
console.log(joy); //我叫sl，今年31岁

Sie müssen .value verwenden, um den Wert zu erhalten

Das obige ist der detaillierte Inhalt vonAnalyse des Vue3-Reaktionsprinzips und des API-Schreibens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!