Cykl życia komponentu Vue.js: kompletny przewodnik po hookach

Vue.js to popularny framework JavaScript do budowania aplikacji webowych. Został zaprojektowany tak, żeby dało się go szybko zrozumieć i wygodnie używać, dlatego sięgają po niego zarówno początkujący, jak i doświadczeni programiści. Jednym z najważniejszych elementów Vue.js są hooki cyklu życia: pozwalają sterować zachowaniem komponentu w reakcji na zdarzenia takie jak zamontowanie, aktualizacja czy usunięcie go z drzewa komponentów.

Czym jest hook cyklu życia w Vue.js?

Hook cyklu życia w Vue.js to funkcja wywoływana w konkretnych momentach: przy tworzeniu, aktualizowaniu i usuwaniu komponentu. Dzięki hookom możesz przypisać konkretne działania do każdego etapu życia komponentu, inicjalizację zmiennych, wywołania asynchroniczne czy sprzątanie zasobów.

Najczęściej używane hooki cyklu życia

Vue.js ma kilka hooków cyklu życia, ale w praktyce najczęściej używa się tych:

• setup: setup() uruchamia się przed wszystkimi pozostałymi hookami i jest punktem wejścia do Composition API, używa się go bez kroku budowania albo po to, żeby wpleść kod oparty na Composition API do komponentu napisanego w Options API.
• created: wywoływany po utworzeniu komponentu i zainicjowaniu jego właściwości
• mounted: wywoływany, gdy komponent trafi na stronę i skończy się jego renderowanie
• updated: wywoływany, gdy komponent dostaje nowe dane
• destroyed: wywoływany, gdy komponent jest niszczony, a jego zasoby sprzątane

Jak używać hooków cyklu życia

Korzystanie z hooków cyklu życia w Vue.js jest proste. Definiujesz je, dodając metodę do obiektu options swojego komponentu. Na przykład żeby wykonać coś w chwili zamontowania komponentu, dopisz do obiektu options taką metodę:

mounted () {
  // kod wykonywany po zamontowaniu komponentu
}

Przykład użycia hooków cyklu życia

Załóżmy, że masz komponent wyświetlający listę artykułów pobranych z API. Hooki cyklu życia obsłużą kolejne etapy:

• w hooku created wywołaj API, żeby pobrać artykuły
• w hooku mounted wyświetl artykuły na stronie za pomocą v-for
• w hooku updated sprawdź, czy dane się zmieniły, i w razie potrzeby odpytaj API ponownie
• w hooku destroyed posprzątaj zasoby, na przykład subskrypcje zdarzeń, żeby uniknąć wycieków pamięci.

Oto konkretny przykład użycia hooków cyklu życia do wyświetlenia listy artykułów:

<template>
  <div>
    <ul>
      <li v-for="article in articles" :key="article.id">{{ article.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      articles: []
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      // wywołaj API, żeby pobrać artykuły
    }
  },
  updated () {
    if (this.articles.length === 0) {
      this.fetchData()
    }
  },
  destroyed () {
    // tutaj posprzątaj zasoby
  }
}
</script>

FAQ o hookach cyklu życia Vue.js

Podsumowanie

Hooki cyklu życia Vue.js to mocne narzędzie dla każdego, kto chce sterować zachowaniem komponentów w reakcji na zdarzenia. Dzięki nim wykonasz konkretne działania w konkretnych momentach życia komponentu: zainicjujesz zmienne, wywołasz metody asynchroniczne, posprzątasz zasoby. Poeksperymentuj z poszczególnymi hookami cyklu życia Vue.js, to szybko przekłada się na jakość kodu.