Options API: Lifecycle hooks

Viz také

Pro sdílené použití Lifecycle hooks se podívejte na Průvodce – Lifecycle hooks

beforeCreate

Voláno při inicializaci instance.

Typ

interface ComponentOptions {
  beforeCreate?(this: ComponentPublicInstance): void
}

Podrobnosti
Voláno okamžitě po inicializaci instance a po vyřešení (resolve) vlastností (props).
Až po této metodě proběhne definice reaktivních proměnných pro vlastnosti a nastavení prvků stavu jako jsou data() nebo computed.
Pamatujte, že setup() hook z Composition API je volán před jakýmkoli hookem Options API, včetně beforeCreate().

created

Voláno poté, co instance dokončila zpracování všech možností (options) souvisejících se stavem.

Typ

interface ComponentOptions {
  created?(this: ComponentPublicInstance): void
}

Podrobnosti
Když je volán tento hook, bylo nastaveno následující: reaktivní data, computed proměnné, funkce a watchery. Fáze připojování (mount) však ještě nezačala a vlastnost $el ještě nebude k dispozici.

beforeMount

Voláno těsně před připojením (mount) komponenty.

Typ

interface ComponentOptions {
  beforeMount?(this: ComponentPublicInstance): void
}

Podrobnosti
Když je tento hook volán, komponenta dokončila nastavení svého reaktivního stavu, ale ještě nebyly vytvořeny žádné DOM elementy. Je připravena poprvé provést svůj DOM vykreslovací efekt.
Tento hook není volán během vykreslování na serveru (SSR).

mounted

Voláno poté, co byla komponenta připojena.

Typ

interface ComponentOptions {
  mounted?(this: ComponentPublicInstance): void
}

Podrobnosti
Komponenta je považována za připojenou (mounted) poté, co:
- Byly připojeny všechny její synchronní komponenty potomků (neplatí pro asynchronní komponenty nebo komponenty uvnitř <Suspense> hierarchie).
- Byl vytvořen její vlastní DOM a vložen do rodičovského kontejneru. Všimněte si, že to zaručuje, že DOM komponenty je v dokumentu pouze tehdy, pokud je v dokumentu také root kontejner aplikace.

Tento hook se typicky používá pro provádění vedlejších efektů, které potřebují přístup k vykreslenému DOM komponenty, nebo pro omezení kódu souvisejícího s DOM na klientovi v aplikaci vykreslené na serveru.

Tento hook není volán během vykreslování na serveru (SSR).

beforeUpdate

Voláno před tím, než se komponenta chystá aktualizovat svůj DOM strom kvůli změně reaktivního stavu.

Typ

interface ComponentOptions {
  beforeUpdate?(this: ComponentPublicInstance): void
}

Detaily
Tento hook lze použít k přístupu ke stavu DOM předtím, než ho Vue aktualizuje. V tomto hooku je také bezpečné upravovat stav komponenty.
Tento hook není volán během vykreslování na serveru (SSR).

updated

Voláno poté, co komponenta aktualizovala svůj DOM strom kvůli změně reaktivního stavu.

Typ

interface ComponentOptions {
  updated?(this: ComponentPublicInstance): void
}

Detaily
Hook updated nadřazené komponenty se volá až po updated komponent potomků.
Tento hook se volá po každé aktualizaci DOM komponenty, která může být způsobena různými změnami stavu, protože z důvodu optimalizace výkonu může být více změn stavu seskupeno do jednoho vykreslovací cyklu. Pokud potřebujete přistupovat k aktualizovanému DOM po konkrétní změně stavu, použijte místo toho nextTick().
Tento hook není volán během vykreslování na serveru (SSR).
Varování
V hooku updated neměňte stav komponenty, jinak to pravděpodobně povede k nekonečné smyčce aktualizací!

beforeUnmount

Voláno před odstraněním instance komponenty.

Typ

interface ComponentOptions {
  beforeUnmount?(this: ComponentPublicInstance): void
}

Detaily
Když je tento hook volán, instance komponenty je stále plně funkční.
Tento hook není volán během vykreslování na serveru (SSR).

unmounted

Voláno poté, co byla komponenta odstraněna.

Typ

interface ComponentOptions {
  unmounted?(this: ComponentPublicInstance): void
}

Podrobnosti
Komponenta je považována za odstraněnou (unmounted) poté, co:
- Byly odstraněny všechny její podřízené komponenty.
- Byly zastaveny všechny asociované reaktivní efekty (efekt vykreslování a computed proměnné / watchery vytvořené během setup())
Použijte tento hook k ručnímu čištění vytvořených vedlejších efektů, jako jsou časovače, DOM event listenery nebo serverová připojení.
Tento hook není volán během vykreslování na serveru (SSR).

errorCaptured

Voláno, když byla zachycena chyba propagující se z komponenty potomka.

Typ

interface ComponentOptions {
  errorCaptured?(
    this: ComponentPublicInstance,
    err: unknown,
    instance: ComponentPublicInstance | null,
    info: string
  ): boolean | void
}

Podrobnosti
Chyby lze zachytit z následujících zdrojů:
- Vykreslování komponenty
- Obsluha událostí
- Lifecycle hooks
- Funkce setup()
- Watchery
- Custom directive hooks
- Transition hooks
Hook dostává tři parametry: chybu, instanci komponenty, která chybu vyvolala, a řetězec s informací, která specifikuje typ zdroje chyby.
TIP
V produkčním prostředí bude třetí parametr (info) zkrácený kód místo kompletního řetězce s informací. Na mapování kódů na texty se můžete podívat do Reference chybových kódů v produkci.
Pro zobrazení stavu chyby uživateli můžete upravit stav komponenty v errorCaptured(). Je však důležité, aby stav chyby nevykresloval původní obsah, který způsobil chybu; jinak bude komponenta vržena do nekonečné smyčky vykreslování.
Hook může vrátit false, aby zastavil další propagaci chyby. Podrobnosti o propagaci chyb naleznete níže.
Pravidla propagace chyb
- Ve výchozím nastavení jsou všechny chyby stále odesílány až na úroveň aplikace do app.config.errorHandler, pokud je definován, aby mohly být tyto chyby stále hlášeny do analytické služby na jednom místě.
- Pokud existuje více errorCaptured hooks v hierarchii dědičnosti komponenty nebo hierarchii rodičů, všechny budou volány se stejnou chybou, v pořadí odspodu nahoru. To je podobné mechanismu probublávání nativních DOM událostí.
- Pokud errorCaptured hook sám vyvolá chybu, tato chyba a původní zachycená chyba jsou odeslány do app.config.errorHandler.
- Hook errorCaptured může vrátit false, aby zabránil propagaci chyby dále. To v podstatě znamená „tato chyba byla zpracována a měla by být ignorována“. Pro tuto chybu to zabrání volání dalších errorCaptured hooks nebo app.config.errorHandler.
  Upozornění pro práci se zachytáváním chyb
- V komponentách s asynchronní funkcí setup() (obsahujícími top-level await) se Vue vždy pokusí vykreslit šablonu komponenty, i když setup() vyvolá výjimku. To pravděpodobně způsobí další chyby, protože během vykreslování se šablona komponenty může pokusit o přístup k neexistujícím vlastnostem kontextu setup(), jehož inicializace selhala. Při zachytávání chyb v takových komponentách buďte připraveni ošetřit jak chyby z neúspěšného asynchronního setup() (ty budou vždy na prvním místě), tak z neúspěšného procesu vykreslování.
- Nahrazení chybné komponenty potomka v komponentě rodiče hluboko uvnitř <Suspense> způsobí v SSR nesoulady hydratace (hydration mismatches). Místo toho zkuste oddělit logiku, která může případně z vnitřního setup() vyvolat výjimku, do samostatné funkce a spustit ji v setup() komponenty rodiče, kde můžete spuštění procesu bezpečně ošetřit pomocí try/catch a v případě potřeby provést náhradní akci před vlastním vykreslením komponenty potomka.

renderTracked

Voláno, když je reaktivní závislost sledována vykreslovacím efektem komponenty.

Tento hook se volá pouze v režimu vývoje (dev) a není volán během vykreslování na serveru (SSR).

Typ

interface ComponentOptions {
  renderTracked?(this: ComponentPublicInstance, e: DebuggerEvent): void
}

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
  key: any
}

Viz také: Reaktivita podrobně

renderTriggered

Voláno, když reaktivní závislost vyvolá nové spuštění vykreslovacího efektu komponenty.

Tento hook se volá pouze v režimu vývoje (dev) a není volán během vykreslování na serveru (SSR).

Typ

interface ComponentOptions {
  renderTriggered?(this: ComponentPublicInstance, e: DebuggerEvent): void
}

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
  key: any
  newValue?: any
  oldValue?: any
  oldTarget?: Map<any, any> | Set<any>
}

Viz také: Reaktivita podrobně

activated

Voláno poté, co je instance komponenty vložena do DOM coby součást stromu uloženého pomocí <KeepAlive>.

Tento hook není volán během vykreslování na serveru (SSR).

Typ

interface ComponentOptions {
  activated?(this: ComponentPublicInstance): void
}

Viz také: Průvodce – Životní cyklus cached instance

deactivated

Voláno poté, co je instance komponenty odebrána z DOM coby součást stromu uloženého pomocí <KeepAlive>.

Tento hook není volán během vykreslování na serveru (SSR).

Typ

interface ComponentOptions {
  deactivated?(this: ComponentPublicInstance): void
}

Viz také: Průvodce – Životní cyklus cached instance

serverPrefetch

Asynchronní funkce, která se vyhodnotí před vykreslením instance komponenty na serveru.

Typ

interface ComponentOptions {
  serverPrefetch?(this: ComponentPublicInstance): Promise<any>
}

Podrobnosti
Pokud callback vrátí Promise, server počká, dokud se Promise nevyřeší, než vykreslí komponentu.
Tento hook se volá pouze během vykreslování na serveru (SSR) a může být použit pro načítání dat pouze na serveru.

Příklad

export default {
  data() {
    return {
      data: null
    }
  },
  async serverPrefetch() {
    // komponenta je vykreslena jako součást výchozího požadavku
    // data se načítají na serveru, protože to je rychlejší než na klientovi
    this.data = await fetchOnServer(/* ... */)
  },
  async mounted() {
    if (!this.data) {
      // pokud jsou při připojení data null, znamená to, že komponenta
      // je dynamicky vykreslena na klientovi
      // proto načíst data na klientovi
      this.data = await fetchOnClient(/* ... */)
    }
  }
}

Viz také: Server-Side Rendering

Navrhněte úpravu této stránky na GitHubu

Options API: Lifecycle hooks ​

beforeCreate ​

created ​

beforeMount ​

mounted ​

beforeUpdate ​

updated ​

beforeUnmount ​

unmounted ​

errorCaptured ​

renderTracked ​

renderTriggered ​

activated ​

deactivated ​

serverPrefetch ​

Options API: Lifecycle hooks

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

errorCaptured

renderTracked

renderTriggered

activated

deactivated

serverPrefetch