Erfahren Sie, wie Sie Vue3 Reactivity implementieren

importiere { beobachtbar, beobachte } von '@nx-js/observer-util';

const Zähler = beobachtbar({ num: 0 });
const countLogger = beobachten(() => console.log(Zähler.num));

// dies ruft countLogger auf und protokolliert 1
Zähler.num++;

// Listener hinzufügen xxx.addEventListener('counter.num', () => console.log(counter.num))
//Ändere den Inhalt counter.num++
//Benachrichtigung sendenxxx.emit('counter.num', counter.num)

registerRunningReactionForOperation({ Ziel, Schlüssel, Empfänger, Typ: 'get' })
const connectionStore = neue WeakMap()
// Reaktionen können sich gegenseitig aufrufen und einen Aufrufstapel bilden
const ReaktionsStack = []

// registriere die aktuell laufende Reaktion, um sie bei obj.key-Mutationen erneut in die Warteschlange zu stellen
Exportfunktion registerRunningReactionForOperation (Operation) {
  // aktuelle Reaktion vom oberen Ende des Stapels holen
  const laufendeReaktion = ReaktionsStack[ReaktionStack.Länge - 1]
  wenn (laufendeReaktion) {
    debugOperation(laufende Reaktion, Operation)
    registerReactionForOperation(laufendeReaktion, Operation)
  }
}

Exportfunktion registerReactionForOperation (Reaktion, { Ziel, Schlüssel, Typ }) {
  wenn (Typ === 'iterieren') {
    Schlüssel = ITERATIONSSCHLÜSSEL
  }

  const Reaktionen für Obj = connectionStore.get(Ziel)
  let reactionsForKey = reactionsForObj.get(Schlüssel)
  wenn (!ReaktionenFürSchlüssel) {
    Reaktionen für Schlüssel = neuer Satz ()
    ReaktionenFürObjekt.set(Schlüssel, ReaktionenFürSchlüssel)
  }
  // Speichern Sie die Tatsache, dass der Schlüssel während des aktuellen Laufs von der Reaktion verwendet wird
  wenn (!reactionsForKey.has(reaction)) {
    Reaktionen für Schlüssel.add(Reaktion)
    Reaktion.Reiniger.Push(Reaktionen für Schlüssel)
  }
}

Verbindungsspeicher<schwache Karte>: {
    // Ziel zB: {num: 1}
    Ziel: <Karte>{
        Num: (Reaktion1, Reaktion2 …)
    }
}

Exportfunktion beobachten (fn, Optionen = {}) {
  // die übergebene Funktion in eine Reaktion einbinden, falls dies nicht bereits der Fall ist
  Konstante Reaktion = fn[IS_REACTION]
    ? fn
    : Funktion Reaktion () {
      returniere runAsReaction(Reaktion, fn, dies, Argumente)
    }
  //Speichern Sie den Scheduler und Debugger auf die Reaktion
  Reaktion.Scheduler = Optionen.Scheduler
  Reaktion.debugger = Optionen.debugger
  // Speichern Sie die Tatsache, dass dies eine Reaktion ist
  Reaktion[IS_REACTION] = wahr
  // führe die Reaktion einmal aus, wenn es sich nicht um eine verzögerte Reaktion handelt
  wenn (!optionen.lazy) {
    Reaktion()
  }
  Rücklaufreaktion
}

Exportfunktion runAsReaction (Reaktion, fn, Kontext, Argumente) {
  // Bauen Sie keine reaktiven Beziehungen auf, wenn die Reaktion unbeobachtet ist
  wenn (Reaktion.unbeobachtet) {
    gibt Reflect.apply(fn, Kontext, Argumente) zurück
  }

  // führe die Reaktion nur aus, wenn sie sich nicht bereits im Reaktionsstapel befindet
  // TODO: Verbessern Sie dies, um explizit rekursive Reaktionen zu ermöglichen
  wenn (ReaktionsStack.indexOf(Reaktion) === -1) {
    // die Verbindungen (Objekt -> Schlüssel -> Reaktionen) freigeben
    // und setze die Cleaner-Verbindungen zurück
    Freisetzungsreaktion (Reaktion)

    versuchen {
      // setze die Reaktion als die aktuell laufende
      // dies ist erforderlich, damit wir (observable.prop -> Reaktion) Paare in der Get-Trap erstellen können
      ReaktionStack.push(Reaktion)
      gibt Reflect.apply(fn, Kontext, Argumente) zurück
    Endlich
      // immer das aktuell laufende Flag aus der Reaktion entfernen, wenn die Ausführung beendet wird
      ReaktionStack.pop()
    }
  }
}

//Führe den Inhalt von try aus,
// Wenn eine Rückgabe erfolgt, wird der Rückgabeinhalt ausgeführt, aber es erfolgt keine Rückgabe. Die Rückgabe erfolgt nach der endgültigen Ausführung, und hier tritt keine Blockierung auf.

Funktion test() {
    versuchen { 
        konsole.log(1); 
        const s = () => { console.log(2); return 4; }; 
        gibt s( zurück);
    Endlich 
        console.log(3) 
    }
}

// 1 2 3 4
Konsole.log(Test())

Funktion createObserve(obj) {
    
    let-Handler = {
        get: Funktion (Ziel, Schlüssel, Empfänger) {
            let result = Reflect.get(Ziel, Schlüssel, Empfänger)
            Track (Ziel, Schlüssel, Empfänger)            
            Ergebnis zurückgeben
        },
        set: Funktion (Ziel, Schlüssel, Wert, Empfänger) {
            let result = Reflect.set(Ziel, Schlüssel, Wert, Empfänger)
            Auslöser (Ziel, Schlüssel, Wert, Empfänger)        
            Ergebnis zurückgeben
        }
    }

    let proxyObj = neuer Proxy(Objekt, Handler)

    Proxy-Objekt zurückgeben
}

Funktion beobachtbar(Objekt) {
    gibt createObserve(obj) zurück.
}

const targetMap = neue WeakMap()
let activeEffectStack = []
let aktiver Effekt

Funktion Track (Ziel, Schlüssel, Empfänger?) {
    let depMap = targetMap.get(Ziel)

    wenn (!depMap) {
        targetMap.set(Ziel, (depMap = neue Map()))
    }

    let dep = depMap.get(Schlüssel)

    wenn (!dep) {
        depMap.set(Schlüssel, ( dep = neues Set() ))
    }

    wenn (!dep.has(activeEffect)) {
        dep.add(aktiver Effekt)
    }
}

ZielMap = {
    <Proxy oder Objekt> beobachtbar: <Map>{
        <ein Schlüssel im Observable> Schlüssel: (beobachten, beobachten, beobachten…)
    }
}

Funktion Trigger(Ziel, Schlüssel, Wert, Empfänger?) {
    let depMap = targetMap.get(ziel)

    wenn (!depMap) {
        zurückkehren
    }

    let dep = depMap.get(Schlüssel)

    wenn (!dep) {
        zurückkehren
    }

    dep.forEach((Artikel) => Artikel && Artikel())
}

Funktion beobachten(fn:Funktion) {
    const wrapFn = () => {

        const Reaktion = () => {
            versuchen {
                aktiverEffekt = fn     
                activeEffectStack.push(fn)
                return fn()
            Endlich
                activeEffectStack.pop()
                aktiverEffekt = aktiverEffektStapel[aktiverEffektStapel.Länge - 1]
            }
        }

        Reaktion zurückgeben()
    }

    wrapFn()

    Rückgabewert für WrapFn
}

sei p = beobachtbar({num: 0})
lass j = beobachte(() => {console.log("ich beobachte:", p.num);)
lass e = beobachte(() => {console.log("ich bin beobachte2:", p.num)})

// ich beobachte: 1
// ich bin observe2: 1
p.num++

Klasse calculatedImpl {
    privater _Wert
    privater _setter
    private Wirkung

    Konstruktor(Optionen) {
        this._value = undefiniert
        this._setter = undefiniert
        const { get, set } = Optionen
        this._setter = gesetzt

        dieser.Effekt = beobachten(() => {
            dieser._Wert = get()
        })
    }

    Wert abrufen() {
        gib diesen Wert zurück
    }

    Wert einstellen (val) {
        dieser._setter && dieser._setter(Wert)
    }
}

Funktion berechnet(fnOderOptionen) {

    let Optionen = {
        erhalten: null,
        gesetzt: null
    }

    if (fnOrOptions Instanz der Funktion) {
        options.get = fnOderOptionen
    } anders {
        const { get, set } = fnOderOptionen
        Optionen.get = get
        Optionen.set = setzen
    }

    gibt neues berechnetesImpl(Optionen) zurück
}

sei p = beobachtbar({num: 0})
lass j = beobachten(() => {console.log("ich beobachte:", p.num); return `ich beobachte: ${p.num}`})
lass e = beobachte(() => {console.log("ich bin beobachte2:", p.num)})
let w = berechnet(() => { return 'Ich bin berechnet 1:' + p.num })
sei v = berechnet({
    erhalten: () => {
        returniere 'Test des berechneten Getters' + p.num
    },

    setzen: (Wert) => {
        p.num = `teste berechnete Setter${val}`
    }
})

p.num++
// ich beobachte: 0
// ich bin observe2: 0
// ich beobachte: 1
// ich bin observe2: 1
// Ich werde 1:1 berechnet
Konsole.log(w.Wert)
v.Wert = 3000
Konsole.log(w.Wert)
// ich beobachte: Test berechnet Setter3000
// ich bin observe2: Test berechnet setter3000
// Ich bin berechnet 1:test berechnet setter3000
w.Wert = 1000
// Für w ist kein Setter festgelegt, daher wird es nicht wirksam. // Ich bin berechnet 1:Test berechneter Setter3000
Konsole.log(w.Wert)