Reaktive Quellcode-Analyse

Reaktiv wird zum Binden von Referenzdatentypen wie Objekten und Arrays verwendet, um Reaktionsfähigkeit zu erreichen.

Reaktive API-Schnittstelle

export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

Zu den zugehörigen APIs gehören readonly, createReactiveObject, flatReadonly, isReactive und toReactive. Quellcode-Operationslogik: Beurteilen Sie isReadonly. Wenn es sich um eine direkte Rückgabe handelt, geben Sie andernfalls die Funktion createReactiveObject ein, um ein reaktives Objekt zu erstellen

export function reactive(target: object) {
    
    
  // if trying to observe a readonly proxy, return the readonly version.
  if (isReadonly(target)) {
    
    
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

Verwenden Sie den neuen Proxy, um verschiedene Handles auszuführen, indem Sie das Ziel bestimmen (collectionHandlers: baseHandlers).

  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )

Der Zieltyp wird mit der folgenden Methode bestimmt

function targetTypeMap(rawType: string) {
    
    
  switch (rawType) {
    
    
    case 'Object':
    case 'Array':
      return TargetType.COMMON
    case 'Map':
    case 'Set':
    case 'WeakMap':
    case 'WeakSet':
      return TargetType.COLLECTION
    default:
      return TargetType.INVALID
  }
}

Wenn das Ziel ein Objekt ist, wird das BaseHandlers-Handle ausgeführt, und es gibt entsprechende Set- und Get-Methoden zum Abfangen und Verarbeiten in baseHandlers.ts im selben Verzeichnis.
wird in der createSet-Methode übergeben

   if (!isReadonly) {
    
    
      track(target, TrackOpTypes.GET, key)
    }

Lösen Sie die Track-Funktion in der Datei effect.ts aus, um Trackeffects auszuführen und Datenänderungen zu manipulieren.

export function trackEffects(
  dep: Dep,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
    
    
  let shouldTrack = false
  if (effectTrackDepth <= maxMarkerBits) {
    
    
    if (!newTracked(dep)) {
    
    
      dep.n |= trackOpBit // set newly tracked
      shouldTrack = !wasTracked(dep)
    }
  } else {
    
    
    // Full cleanup mode.
    shouldTrack = !dep.has(activeEffect!)
  }

  if (shouldTrack) {
    
    
    dep.add(activeEffect!)
    activeEffect!.deps.push(dep)
    if (__DEV__ && activeEffect!.onTrack) {
    
    
      activeEffect!.onTrack({
    
    
        effect: activeEffect!,
        ...debuggerEventExtraInfo!
      })
    }
  }
}

Wie oben erwähnt, löst die Get-Methode die Trigger-Methode aus, um den Trigger-Nebeneffekt auszuführen und die Datenaktualisierung abzuschließen.
Hängen Sie abschließend das schematische Diagramm von Reactive

aus _mxin an

Im nächsten Artikel werden reaktive Anwendungen erläutert