Detaillierte Erklärung des Responsive-Prinzips von Vue3

// 1. Objektreaktivität: Durchlaufe jeden Schlüssel und definiere Getter und Setter
// 2. Array-Reaktionsfähigkeit: Array-Prototyp-Methode überschreiben und zusätzliche Benachrichtigungslogik hinzufügen const originalProto = Array.prototype
const arrayProto = Objekt.erstellen(originalProto)
  ;['push', 'pop', 'shift', 'unshift', 'spleißen', 'umkehren', 'sortieren'].forEach(
    Methode => {
      arrayProto[Methode] = Funktion () {
        originalProto[Methode].apply(diese, Argumente)
        benachrichtigenUpdate()
      }
    }
  )
Funktion beobachten(Objekt) {
  wenn (Typ von Objekt !== 'Objekt' || Objekt == null) {
    zurückkehren
  }
  // Array-Typ-Beurteilung hinzufügen. Wenn es ein Array ist, seinen Prototyp überschreiben, if (Array.isArray(obj)) {
    Objekt.setPrototypeOf(obj, arrayProto)
  } anders {
    const keys = Objekt.keys(obj)
    für (lass i = 0; i < Schlüssel.Länge; i++) {
      const Schlüssel = Schlüssel[i]
      defineReactive(Objekt, Schlüssel, Objekt[Schlüssel])
    }
  }
}
Funktion defineReactive (Objekt, Schlüssel, Wert) {
  observe(val) // Das Problem verschachtelter Objekte lösen Object.defineProperty(obj, key, {
    erhalten () {
      Rückgabewert
    },
    setze (neuerWert) {
      wenn (neuerWert !== Wert) {
        observe(newVal) // Neuer Wert ist ein Objekt val = newVal
        benachrichtigenUpdate()
      }
    }
  })
}
Funktion Benachrichtigungsupdate () {
  console.log('Seite aktualisiert!')
}

Funktion reaktiv(Objekt) {
  wenn (Typ von Objekt !== 'Objekt' und Objekt != null) {
    Rückgabeobjekt
  }
  // Proxy entspricht dem Hinzufügen einer Interception zur äußeren Ebene des Objekts // http://es6.ruanyifeng.com/#docs/proxy
  const beobachtet = neuer Proxy(obj, {
    get (Ziel, Schlüssel, Empfänger) {
      // Reflect wird verwendet, um Standardoperationen an Objekten durchzuführen, was standardisierter und benutzerfreundlicher ist. // Proxy- und Objektmethoden haben entsprechende Reflect-Methoden. // http://es6.ruanyifeng.com/#docs/reflect
      const res = Reflect.get(Ziel, Schlüssel, Empfänger)
      console.log(`Holen Sie sich ${key}:${res}`)
      Rückgabewert
    },
    set (Ziel, Schlüssel, Wert, Empfänger) {
      const res = Reflect.set(Ziel, Schlüssel, Wert, Empfänger)
      console.log(`Setzen Sie ${key}:${value}`)
      Rückgabewert
    },
    deleteProperty (Ziel, Schlüssel) {
      const res = Reflect.deleteProperty(Ziel, Schlüssel)
      console.log(`lösche ${key}:${res}`)
      Rückgabewert
    }
  })
  Rückkehr beobachtet
}
//Codetest const state = reactive({
  foo: "foo",
  Balken: { a: 1 }
})
// 1. state.foo abrufen // ok
// 2. Setze das vorhandene Attribut state.foo = 'fooooooo' // ok
// 3. Nicht vorhandenes Attribut state.dong = 'dong' setzen // ok
// 4. Attribut löschen delete state.dong // ok

// Verschachtelte Objekteigenschaften festlegen react.bar.a = 10 // nein ok

      // Hilfsmethode extrahieren const isObject = val => val !== null && typeof val === 'object'
      Funktion reaktiv(Objekt) {
        //Beurteilen, ob es ein Objekt ist, if (!isObject(obj)) {
          Rückgabeobjekt
        }
        const beobachtet = neuer Proxy(obj, {
          get (Ziel, Schlüssel, Empfänger) {
            // ...
            // Wenn es ein Objekt ist, ist Rekursion erforderlich return isObject(res) ? reactive(res) : res
          },
          //...
        }

const toProxy = new WeakMap() // dasselbe wie obj:observed
      const toRaw = new WeakMap() // dasselbe wie beobachtet:obj
      Funktion reaktiv(Objekt) {
        //...
        // Cache durchsuchen um doppelte Proxys zu vermeiden if (toProxy.has(obj)) {
          zurück zu Proxy.get(obj)
        }
        wenn (toRaw.has(obj)) {
          Rückgabeobjekt
        }
        const beobachtet = neuer Proxy(...)
        // Proxy-Ergebnisse zwischenspeichern toProxy.set(obj, beobachtet)
        toRaw.set(beobachtet, Objekt)
        Rückkehr beobachtet
      }
      // Testeffekt console.log(reactive(data) === status)
      console.log(reaktiv(Status) === Status)