Schnellstart der Vue3-Dokumentation

1. Einrichtung

Kombinations-API:

• Die setup -Option sollte eine Funktion sein
• setup -Optionsfunktion akzeptiert zwei Parameter: props und context
• setup -Optionsfunktion muss den Inhalt zurückgeben, der der Komponente angezeigt werden soll
• setup muss mit return zurückgegeben werden, bevor es von der Komponente verwendet werden kann, einschließlich Daten und Methoden

1. Der erste Parameter in der Setup-Funktion — props

props in der setup -Funktion reagieren und werden aktualisiert, wenn neue Requisiten übergeben werden.

Standard exportieren {
  Requisiten: {
    Titel: Zeichenfolge
  },
  setup(Requisiten) {
    console.log(Eigenschaften.Titel)
  }
}

Da props jedoch reaktiv sind, können Sie keine ES6-Destrukturierung verwenden, da dadurch die Reaktionsfähigkeit der Props beeinträchtigt würde.
Wenn Sie die Stütze destrukturieren müssen, können Sie dies sicher tun, indem Sie in der Setup-Funktion toRefs verwenden.

importiere { toRefs } von 'vue'

setup(Requisiten) {
    const { Titel } ​​= toRefs(Eigenschaften)

    console.log(Titel.Wert)
}

2. Kontext

Der zweite Parameter in der setup -Funktion – contextcontext ist ein einfaches JavaScript-Objekt, das die Eigenschaften der drei Komponenten verfügbar macht.

xport Standard {
  setup(Eigenschaften, Kontext) {
    // Attribut (nicht reagierendes Objekt)
    konsole.log(Kontext.attrs)

    // Slot (nicht reagierendes Objekt)
    Konsole.log(Kontext.Slots)

    // Ereignis auslösen (Methode)
    Konsole.log(Kontext.emit)
  }
}

context ist ein einfaches JavaScript Objekt, das heißt, es ist nicht reaktiv, was bedeutet, dass Sie ES6-Destrukturierung sicher auf den Kontext anwenden können

Standard exportieren {
  setup(Eigenschaften, { Attribute, Steckplätze, emittieren }) {
    ...
  }
}

2. Rückgabewert der Setup-Funktion

1. Der Rückgabewert der Setup-Funktion - Objekt

Wenn setup ein Objekt zurückgibt, können Sie auf die Eigenschaften dieses Objekts in der Vorlage Ihrer Komponente zugreifen, genau wie auf die an setup übergebene props property :

<Vorlage>
  <!-- Es wird bei Verwendung in der Vorlage automatisch entpackt, daher ist .value nicht erforderlich -->
  <div>{{ LeserAnzahl }} {{ Buch.Titel }}</div>
</Vorlage>

<Skript>
  importiere { ref, reaktiv } von 'vue'

  Standard exportieren {
    aufstellen() {
      const Leserzahl = ref(0)
      const book = reactive({ Titel: 'Vue 3-Handbuch' })

      // der Vorlage aussetzen
      zurückkehren {
        LeserAnzahl,
        Buch
      }
    }
  }
</Skript>

Hinweis: Vom Setup zurückgegebene Verweise werden beim Zugriff in Vorlagen automatisch entpackt. Sie sollten in Vorlagen daher nicht .value verwenden.

3. Reaktionsfähiges System-API

1. reaktiv

reactive() nimmt ein einfaches Objekt und gibt einen reaktionsfähigen Proxy für dieses einfache Objekt zurück. Entspricht Vue.observable() in 2.x

const obj = reaktiv({ Anzahl: 0 })

Responsive Transformationen sind „tief“: Sie wirken sich auf alle verschachtelten Eigenschaften innerhalb des Objekts aus. Basierend auf der ES2015-Proxy-Implementierung ist das zurückgegebene Proxy-Objekt nicht identisch mit dem Originalobjekt. Es wird empfohlen, nur Proxy-Objekte zu verwenden und sich nicht auf die Originalobjekte zu verlassen.

<Vorlage>
  <div id="app">{ Status.Anzahl }</div>
</Vorlage>

<Skript>
importiere { reaktiv } von 'vue'
Standard exportieren {
  aufstellen() {
    // Status ist jetzt ein reaktiver Status const state = reactive({
      Anzahl: 0,
    })
  }
}
</Skript>

2. Referenz

Akzeptiert einen Wert und gibt ein reaktionsfähiges, veränderbares ref Objekt zurück. Ein ref -Objekt hat eine einzelne Eigenschaft .value , die auf den internen Wert verweist.

Konstante Anzahl = ref(0)
console.log(Anzahl.Wert) // 0

Anzahl.Wert++
konsole.log(Anzahl.Wert) // 1

Wenn ref ein Objekt ist, wird die reaktive Methode aufgerufen, um eine tiefe Antwortkonvertierung durchzuführen.

Zugriff in Vorlage:

Wenn ref als Eigenschaft des Rendering-Kontexts (also in dem von setup() zurückgegebenen Objekt) zurückgegeben und in einer Vorlage verwendet wird, wird es automatisch ausgepackt, ohne dass .value in die Vorlage geschrieben werden muss:

<Vorlage>
  <div>{{ Anzahl }}</div>
</Vorlage>

<Skript>
  Standard exportieren {
    aufstellen() {
      zurückkehren {
        Anzahl: ref(0),
      }
    },
  }
</Skript>

Zugriff als Eigenschaft eines responsiven Objekts:

Wenn auf ref als property eines reactive Objekts zugegriffen oder es geändert wird, wird value Wert ebenfalls automatisch ausgepackt und sein Verhalten ähnelt dem einer normalen Eigenschaft:

Konstante Anzahl = ref(0)
const state = reaktiv({
  zählen,
})

konsole.log(status.anzahl) // 0

Zustandsanzahl = 1
konsole.log(Anzahl.Wert) // 1

Hinweis: Wenn Sie einer vorhandenen ref eine neue ref zuweisen, wird die alte ref ersetzt:

const andereAnzahl = ref(2)

Zustand.Anzahl = andereAnzahl
konsole.log(status.anzahl) // 2
konsole.log(Anzahl.Wert) // 1

Hinweis: ref wird nur ausgepackt, wenn er in reactive Object verschachtelt ist. Beim Zugriff auf ref aus nativen Sammlungsklassen wie Array oder Map wird es nicht automatisch ausgepackt:

const arr = reaktiv([ref(0)])
// Hier wird .value benötigt
Konsole.log(arr[0].Wert)

const map = reaktiv(neue Map([['foo', ref(0)]]))
// Hier wird .value benötigt
Konsole.log(Karte.get('foo').Wert)

Typdefinitionen:

Schnittstelle Ref<T> {
  Wert: T
}

Funktion ref<T>(Wert: T): Ref<T>

Manchmal müssen wir möglicherweise eine komplexere Typannotation für ref erstellen. Wir können die Standardableitung überschreiben, indem wir beim Aufruf von ref ein generisches Typargument übergeben:

const foo = ref<string | number>('foo') // Typ von foo: Ref<string | number>

foo.value = 123 // Bestanden!

3. berechnet

Es gibt zwei Möglichkeiten, die reaktionsfähige computed API zu verwenden:

(1) Übergeben Sie eine getter -Funktion und geben Sie ein ref Objekt zurück, das standardmäßig nicht manuell geändert werden kann.

Konstante Anzahl = ref(1)
const plusOne = berechnet(() => Anzahl.Wert + 1)

konsole.log(plusEins.Wert) // 2

plusOne.value++ // Fehler!

(2) Übergeben Sie ein Objekt mit get und set -Funktionen, um einen Berechnungszustand zu erstellen, der manuell geändert werden kann.

Konstante Anzahl = ref(1)
const plusOne = berechnet({
  bekomme: () => Anzahl.Wert + 1,
  setzen: (Wert) => {
    Anzahl.Wert = Wert - 1
  },
})

plusEins.Wert = 1
konsole.log(Anzahl.Wert) // 0

Typdefinitionen:

// schreibgeschützte Funktion computed<T>(getter: () => T): Readonly<Ref<Readonly<T>>>

// Modifizierbare Funktion computed<T>(options: {
  erhalten: () => T
  set: (Wert: T) => void
}): Ref<T>

4. schreibgeschützt

Übergeben Sie ein Objekt (responsive oder normal) oder ref und geben Sie einen schreibgeschützten Proxy an das ursprüngliche Objekt zurück. Ein schreibgeschützter Proxy ist „tief“ und alle verschachtelten Eigenschaften innerhalb des Objekts sind ebenfalls schreibgeschützt.

const original = reaktiv({Anzahl: 0})

const Kopie = schreibgeschützt (Original)

UhrEffekt(() => {
  // Abhängigkeitsverfolgung console.log(copy.count)
})

// Änderungen am Original lösen Listener für die Kopie aus original.count++

// Kopie kann nicht geändert werden und es erfolgt eine Warnung: copy.count++ // Warnung!

5. Uhreffekt

Führt eine übergebene Funktion sofort aus, verfolgt reaktiv ihre Abhängigkeiten und führt die Funktion erneut aus, wenn sich ihre Abhängigkeiten ändern.

Konstante Anzahl = ref(0)

watchEffect(() => konsole.log(Anzahl.Wert))
//-> 0 ausgeben

setzeTimeout(() => {
  Anzahl.Wert++
  //-> 1 ausdrucken
}, 100)

5.1 Hören Sie nicht mehr zu

Wenn watchEffect in der setup() -Funktion einer Komponente oder einem Lifecycle-Hook aufgerufen wird, wird der Listener mit dem Lebenszyklus der Komponente verknüpft und automatisch gestoppt, wenn die Komponente deinstalliert wird.

In manchen Fällen können Sie den Rückgabewert auch explizit aufrufen, um das Abhören zu beenden:

const stop = Uhreffekt(() => {
  /* … */
})

// Dann stop()

5.2 Beseitigung von Nebenwirkungen

Manchmal führt eine Nebeneffektfunktion einige asynchrone Nebeneffekte aus, die bereinigt werden müssen, wenn sie ungültig sind (d. h. der Status hat sich geändert, bevor sie abgeschlossen ist). Daher kann die vom Listening-Nebeneffekt übergebene Funktion eine onInvalidate Funktion als Eingabeparameter erhalten, um einen Rückruf zu registrieren, wenn die Bereinigung fehlschlägt. Dieser Ungültigkeitsrückruf wird ausgelöst, wenn Folgendes geschieht:

• Wenn die Nebenwirkung erneut ausgeführt werden soll
• Der Listener wird gestoppt (wenn die Komponente ausgehängt wird, sofern watchEffect in setup() oder Lifecycle-Hooks verwendet wird)
  

watchEffect((beiUngültigkeit) => {
  Konstantes Token = performAsyncOperation(ID.Wert)
  beiUngültig(() ​​=> {
    // Wenn sich die ID ändert oder nicht mehr zuhört // Den vorherigen asynchronen Vorgang abbrechen token.cancel()
  })
})

Der Grund, warum wir den Ungültigkeitsrückruf durch Übergeben einer Funktion registrieren, anstatt ihn vom Rückruf zurückzugeben (wie in React useEffect ), liegt darin, dass der Rückgabewert für die asynchrone Fehlerbehandlung wichtig ist.

Bei der Durchführung von Datenanforderungen ist die Nebeneffektfunktion häufig eine asynchrone Funktion:

const data = ref(null)
UhrEffekt(async () => {
  data.value = warte auf fetchData(props.id)
})

Wir wissen, dass asynchrone Funktionen implizit ein Promise zurückgeben, aber die Bereinigungsfunktion muss registriert werden, bevor Promise resolve wird. Darüber hinaus verlässt sich Vue auf dieses zurückgegebene Promise , um potenzielle Fehler in Promise -Kette automatisch zu behandeln.

5.3 Aktualisierungszeitpunkt für Nebeneffekte

Das reaktionsfähige System von Vue speichert Nebeneffektfunktionen im Cache und aktualisiert sie asynchron. Dadurch werden unnötige wiederholte Aufrufe vermieden, die durch mehrere Statusänderungen im selben Tick verursacht werden. In der Kernimplementierung ist die Aktualisierungsfunktion der Komponente auch ein überwachter Nebeneffekt. Wenn eine benutzerdefinierte Nebeneffektfunktion in die Warteschlange gestellt wird, wird sie ausgeführt, nachdem alle Komponenten aktualisiert wurden:

<Vorlage>
  <div>{{ Anzahl }}</div>
</Vorlage>

<Skript>
  Standard exportieren {
    aufstellen() {
      Konstante Anzahl = ref(0)

      UhrEffekt(() => {
        Konsole.log(Anzahl.Wert)
      })

      zurückkehren {
        zählen,
      }
    },
  }
</Skript>

In diesem Beispiel:

count wird beim ersten Durchlauf synchron gedruckt. Wenn count geändert wird, wird der Nebeneffekt ausgeführt, nachdem die Komponente aktualisiert wurde.

Bitte beachten Sie: Der Initialisierungslauf wird ausgeführt, bevor die Komponente mounted . Wenn Sie beim Schreiben einer Nebeneffektfunktion auf DOM (oder einen Vorlagenverweis) zugreifen möchten, tun Sie dies daher im onMounted Hook:

beimMounted(() => {
  UhrEffekt(() => {
    // Sie können hier auf DOM- oder Vorlagenreferenzen zugreifen
  })
})

Wenn der Nebeneffekt synchron oder vor der Aktualisierung der Komponente erneut ausgeführt werden muss, können wir als Optionen ein Objekt mit einer Flush-Eigenschaft übergeben (standardmäßig „ post “):

// watchEffect synchron ausführen(
  () => {
    /* … */
  },
  {
    leeren: 'synchronisieren',
  }
)

// watchEffect ausführen(
  () => {
    /* … */
  },
  {
    Spülen: 'vor',
  }
)

5.4 Listener-Debugging

Mit onTrack und onTrigger kann das Verhalten eines Listeners debuggt werden.

• onTrack wird aufgerufen, wenn eine reactive Objekteigenschaft oder ein ref als Abhängigkeit verfolgt wird.
• onTrigger wird aufgerufen, wenn eine Abhängigkeitsänderung dazu führt, dass ein Nebeneffekt ausgelöst wird
  

Beide Rückrufe erhalten ein Debuggerereignis mit Informationen zu den Abhängigkeiten. Es wird empfohlen, in den folgenden Rückrufen Debugger-Anweisungen zu schreiben, um Abhängigkeiten zu überprüfen:

UhrEffekt(
  () => {
    /* Nebenwirkungen */
  },
  {
    beiTrigger(e) {
      Debugger
    },
  }
)

onTrack und onTrigger sind nur im Entwicklungsmodus verfügbar.

Typdefinitionen:

Funktion watchEffect(
  Wirkung: (onInvalidate: InvalidateCbRegistrator) => ungültig,
  Optionen?: WatchEffectOptions
): Stoppgriff

Schnittstelle WatchEffectOptions {
  leeren?: ,pre‘ | ,post‘ | ,sync‘
  onTrack?: (Ereignis: DebuggerEvent) => void
  beiTrigger?: (Ereignis: DebuggerEvent) => void
}

Schnittstelle DebuggerEvent {
  Effekt: Reaktiver Effekt
  Ziel: beliebig
  Typ: Operationstypen
  Schlüssel: Zeichenfolge | Symbol | undefiniert
}

Typ InvalidateCbRegistrator = (ungültig machen: () => void) => void

Typ StopHandle = () => void

6. Uhr

watch API ist exakt gleichwertig mit 2.x this.$watch (und den entsprechenden Optionen in watch ). watch muss auf eine bestimmte Datenquelle hören und Nebeneffekte in der Rückruffunktion ausführen. Die Standardeinstellung ist verzögerte Ausführung, was bedeutet, dass der Rückruf nur ausgeführt wird, wenn sich die beobachtete Quelle ändert.

• Im Vergleich zu watchEffect，watch :

1. Faule Ausführung von Nebenwirkungen;
2. Machen Sie deutlicher, welche Statusänderungen dazu führen, dass Listener Nebeneffekte erneut ausführen.
3. Greifen Sie auf die Werte vor und nach der Änderung des Abhörstatus zu.

• Abhören einer einzelnen Datenquelle

1. Die Datenquelle eines Listeners kann eine Getter-Funktion sein, die einen Wert zurückgibt, oder es kann ein Verweis sein:

// Auf einen Getter hören
const state = reaktiv({Anzahl: 0})
betrachten(
  () => Status.Anzahl,
  (Anzahl, vorherigeAnzahl) => {
    /* … */
  }
)

// Hören Sie einem Schiedsrichter direkt zu
Konstante Anzahl = ref(0)
beobachten(Anzahl, (Anzahl, vorherigeAnzahl) => {
  /* … */
})

6.1 Mehrere Datenquellen abhören

watcher können auch Arrays verwenden, um mehrere Quellen gleichzeitig abzuhören:

beobachten([fooRef, barRef], ([foo, bar], [vorherigeFoo, vorherigeBar]) => {
  /* … */
})

6.2 Mit watchEffect geteilte Verhaltensweisen

watch und watchEffect verhalten sich beim Stoppen des Abhörens, beim Löschen von Nebeneffekten (entsprechend wird onInvalidate als dritter Parameter des Rückrufs übergeben), beim Aktualisieren von Nebeneffekten und beim Debuggen des Listeners gleich.

Typdefinitionen:

// Auf eine einzelne Datenquellenfunktion hören watch<T>(
  Quelle: WatcherSource<T>,
  Rückruf:
    Wert: T,
    alterWert: T,
    bei Ungültigkeitserklärung: InvalidateCbRegistrator
  ) => ungültig,
  Optionen?: WatchOptions
): Stoppgriff

// Auf mehrere Datenquellen hören Funktion watch<T extends WatcherSource<unknown>[]>(
  Quellen: T
  Rückruf:
    Werte: MapSources<T>,
    alteWerte: MapSources<T>,
    bei Ungültigkeitserklärung: InvalidateCbRegistrator
  ) => ungültig,
  Optionen? : WatchOptions
): Stoppgriff

Typ WatcherSource<T> = Ref<T> | (() => T)

Typ MapSources<T> = {
  [K in keyof T]: T[K] erweitert WatcherSource<infer V> ? V : nie
}

// Allgemeine Eigenschaften finden Sie in der Typdefinition von „watchEffect“. Schnittstelle WatchOptions extends WatchEffectOptions {
  sofort?: boolesch // Standard: false
  tief?: Boolesch
}

Dies ist das Ende dieses Artikels über den Schnellstart der Vue3-Dokumentenorganisation. Weitere relevante Inhalte zur Vue3-Dokumentenorganisation finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!