Was ist das Prinzip der reaktiven responsiven Abhängigkeitserfassung, -verteilung und -aktualisierung von vue3?

proxy

vue3 wurde von Object.property in Proxy, <code>Proxy kann Objektarrays im Vergleich zum ersteren direkt überwachen. Bei Objekten und Arrays auf tiefer Ebene entspricht der Trigger dem Getter und sammelt ihn dann rekursiv Abhängigkeiten, und es ist nicht direkt rekursiv wie vue2 Gewalt, und die Gesamtleistung ist besserObject.property更换成Proxy，Proxy相比于前者可以直接监听对象数组，对于深层次的对象和数组，会把触发对应getter，然后去递归进行依赖收集，并不是直接像vue2暴力那样递归，总体而言性能更好

• 对reactive传进来的对象进行Proxy进行劫持在内部进行依赖收集与通知更新操作

function reactive(raw) {
  return new Proxy(raw, {
    get(target, key) {
      const res = Reflect.get(target, key);
      //添加依赖
      track(target, key as string);
      return res;
    },
    set(target, key, value) {
      const res = Reflect.set(target, key, value);
      trigger(target, key);
      return res;
    },
  });
}

采用Reflet对对象进行标准化操作，因为如果直接采用JS如果失败了，不会产生异常提示

这样在进行获取数据是后进行依赖收集，在更新数据后进行通知依赖更新

依赖收集

接下来便介绍依赖收集是个什么样子

const targetMap = new WeakMap();
function track(target, key) {
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }
  dep.add(currentEffect);
}

首先是一个WeakMap-->然后用户通过target获取对应的内部Map-->然后通过key获取到Set集合，内部便是存储的一个个依赖。其实依赖收集的过程就是这样。

这里使用WeakMap原因是它是一个弱引用，不会影响垃圾回收机制回收。

currentEffect

那么currentEffect 到底是个什么东西呢？实际上是ReactiveEffect中正在运行的类

class ReactiveEffect {
  private fn: Function;
  constructor(_fn: Function) {
    this.fn = _fn;
  }
  run() {
    currentEffect = this;
    this.fn();
  }
}
let currentEffect: null | ReactiveEffect = null;
function effect(fn: Function) {
  const reactiveEffect = new ReactiveEffect(fn);
  reactiveEffect.run();
}

后续会详情讲解，目前可以就把他理解成一个依赖，用户使用了effect函数过后，里面的响应式数据发生变化后会重新执行传递进去的回调函数

vue2中收集的依赖对应watcher，vue3收集的依赖实际是effect，他们两者实现功能实际上是一样的。

派发更新

这里暂不考虑DOM问题，操作起来其实很简单就是通过被Proxy劫持的target与key找到对应的Set集合调用用户传递的fn

• Für Objekte übergeben durch reaktive Entführung des Proxys und Durchführung von Abhängigkeitserfassungs- und Benachrichtigungsaktualisierungsvorgängen intern#🎜🎜#
#🎜🎜#

function trigger(target, key) {
  let depsMap = targetMap.get(target);
  let dep = depsMap.get(key);
  for (let effect of dep) {
    effect.fn();
  }
}

#🎜🎜#Verwenden Sie Reflet, um das Objekt zu standardisieren, denn wenn Sie Verwenden Sie JS direkt. Wenn dies fehlschlägt, wird keine Ausnahmeaufforderung generiert. 🎜🎜#Abhängigkeitssammlung #🎜🎜# #🎜🎜#Das Folgende ist eine Einführung, wie die Abhängigkeitssammlung aussieht#🎜🎜#rrreee#🎜🎜#Zuerst ist es eine WeakMap-->Dann erhält der Benutzer die entsprechende interne Karte über das Ziel-->Dann wird die Set-Sammlung über den Schlüssel erhalten, intern werden die Abhängigkeiten gespeichert. Tatsächlich handelt es sich dabei um den Prozess der Abhängigkeitssammlung. #🎜🎜##🎜🎜#Der Grund, warum WeakMap hier verwendet wird, ist, dass es sich um eine schwache Referenz handelt und den Garbage-Collection-Mechanismus nicht beeinträchtigt. #🎜🎜#

currentEffect

#🎜🎜#Was genau ist also currentEffect? Tatsächlich ist es die laufende Klasse in ReactiveEffect#🎜🎜#rrreee#🎜🎜# Im Moment kann es als Abhängigkeit verstanden werden, nachdem der Benutzer den Effekt verwendet hat Funktion, die Antwort im Inneren Nachdem sich die Formeldaten geändert haben, wird die übergebene Rückruffunktion erneut ausgeführt #🎜🎜##🎜🎜#Die in vue2 gesammelten Abhängigkeiten entsprechen Beobachtern, und die in vue3 gesammelten Abhängigkeiten sind tatsächlich Effekte Sie implementieren tatsächlich die gleichen. #🎜🎜##🎜🎜#Verteilungsaktualisierung#🎜🎜##🎜🎜# Ignorieren Sie vorerst das Problem mit dem DOM, der Vorgang ist eigentlich sehr einfach, er wird von Proxygekapert > target und key finden die entsprechende Set-Sammlung und rufen die vom Benutzer übergebene Funktion fn auf, um Abhängigkeiten zu aktualisieren #🎜🎜#rrreee

Das obige ist der detaillierte Inhalt vonWas ist das Prinzip der reaktiven responsiven Abhängigkeitserfassung, -verteilung und -aktualisierung von vue3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!