Lifecycle Hooks in Vue.js verstehen

Wenn Sie Vue-Anwendungen entwickeln und sich fragen, wann Sie Daten abrufen, Ressourcen aufräumen oder mit dem DOM interagieren sollten, müssen Sie Lifecycle Hooks verstehen. Diese Hooks sind das Rückgrat des Komponentenverhaltens in Vue 3, dennoch haben viele Entwickler Schwierigkeiten zu wissen, welchen Hook sie wann verwenden sollen.

Dieser Artikel erklärt die Lifecycle Hooks von Vue 3 unter Verwendung der Composition API und behandelt jede Phase von der Komponentenerstellung bis zur -zerstörung mit praktischen Beispielen, die Sie sofort anwenden können.

Der Setup-Hook: Der Einstiegspunkt Ihrer Komponente

Der setup-Hook ist der Grundpfeiler der Vue 3 Composition API und ersetzt sowohl beforeCreate als auch created aus Vue 2. Er wird ausgeführt, bevor die Komponenteninstanz vollständig initialisiert ist, was ihn zum perfekten Ort macht, um reaktiven State zu definieren und Ihre Komponentenlogik zu komponieren.

import { ref, reactive } from 'vue'

export default {
  setup(props, context) {
    const count = ref(0)
    const user = reactive({ name: '', email: '' })
    
    // Logic runs immediately, before template compilation
    console.log('Component initializing')
    
    return { count, user }
  }
}

Anders als bei der Options API von Vue 2 erhält die setup-Funktion props und context als Parameter, wodurch Sie direkten Zugriff auf Komponenteneigenschaften haben, ohne this zu verwenden.

Mounting-Phase: onBeforeMount und onMounted

onBeforeMount() - Vorbereitung vor dem DOM

Der onBeforeMount-Hook wird nach setup, aber bevor das DOM der Komponente erstellt wird, ausgelöst. Verwenden Sie ihn für Operationen, die vor dem Rendern stattfinden müssen, aber keinen DOM-Zugriff erfordern.

import { onBeforeMount } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // Initialize non-DOM dependent resources
      console.log('Template compiled, DOM not yet created')
    })
  }
}

onMounted() - DOM-bereite Operationen

onMounted ist der Ort, an dem die meiste DOM-bezogene Initialisierung stattfindet. Das Template der Komponente wurde gerendert und in das Dokument eingefügt, sodass es sicher ist, auf Elemente zuzugreifen und Drittanbieter-Bibliotheken zu initialisieren.

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const chartContainer = ref(null)
    
    onMounted(async () => {
      // Fetch data after component mounts
      const data = await fetch('/api/data').then(r => r.json())
      
      // Initialize chart library with DOM element
      // Assuming Chart is imported from a charting library
      new Chart(chartContainer.value, { data })
    })
    
    return { chartContainer }
  }
}

Update-Phase: Änderungen des reaktiven States

onBeforeUpdate() - Logik vor dem Rendern

Wenn Änderungen reaktiver Daten ein erneutes Rendern auslösen, wird zuerst onBeforeUpdate ausgeführt. Dies ist Ihre letzte Gelegenheit, den aktuellen DOM-Zustand zu lesen, bevor Vue ihn aktualisiert.

import { onBeforeUpdate } from 'vue'

export default {
  setup() {
    onBeforeUpdate(() => {
      // Capture current scroll position before DOM updates
      const scrollY = window.scrollY
      // Store or use scrollY as needed
    })
  }
}

onUpdated() - Operationen nach dem Rendern

Nachdem Vue das DOM aktualisiert hat, wird onUpdated ausgelöst. Seien Sie hier vorsichtig – das Ändern reaktiver States kann zu Endlosschleifen führen.

import { onUpdated } from 'vue'

export default {
  setup() {
    onUpdated(() => {
      // DOM has been updated
      // Use nextTick() for specific state change reactions
      console.log('Component re-rendered')
    })
  }
}

Unmounting-Phase: Komponenten-Cleanup

onBeforeUnmount() - Aufgaben vor dem Cleanup

Bevor eine Komponente entfernt wird, gibt Ihnen onBeforeUnmount ein letztes Mal Zugriff auf die voll funktionsfähige Komponente.

import { onBeforeUnmount, reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ data: 'important info' })
    
    onBeforeUnmount(() => {
      // Save component state or notify external systems
      localStorage.setItem('lastState', JSON.stringify(state))
    })
    
    return { state }
  }
}

onUnmounted() - Ressourcen-Cleanup

onUnmounted ist entscheidend, um Speicherlecks zu verhindern. Räumen Sie hier Event-Listener, Timer und Subscriptions auf.

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    let timer
    
    const handleResize = () => {
      console.log('Window resized')
    }
    
    onMounted(() => {
      timer = setInterval(() => {
        console.log('Polling...')
      }, 1000)
      
      window.addEventListener('resize', handleResize)
    })
    
    onUnmounted(() => {
      clearInterval(timer)
      window.removeEventListener('resize', handleResize)
    })
  }
}

Praktische Patterns und Best Practices

Beachten Sie diese wichtigen Punkte bei der Arbeit mit Vue 3 Lifecycle-Methoden:

1. Importieren Sie Hooks immer aus ‘vue’, bevor Sie sie verwenden
2. Rufen Sie Hooks synchron innerhalb von setup() auf – nicht in Callbacks oder Promises
3. Migration von Vue 2 zu Vue 3: beforeDestroy heißt jetzt onBeforeUnmount, destroyed heißt onUnmounted
4. Server-side Rendering: Mounting- und Update-Hooks werden während SSR nicht ausgeführt

Verwenden Sie für das Testen von Komponenten mit Lifecycle Hooks Vue Test Utils, um Hook-Verhalten ordnungsgemäß auszulösen und zu überprüfen.

Fazit

Die Lifecycle Hooks der Vue 3 Composition API bieten präzise Kontrolle über das Verhalten Ihrer Komponente in jeder Phase. Indem Sie verstehen, wann jeder Hook ausgelöst wird und welche Ressourcen verfügbar sind, können Sie sauberere und performantere Komponenten schreiben. Beginnen Sie mit setup() für die Initialisierung, verwenden Sie onMounted() für DOM-Operationen und räumen Sie immer in onUnmounted() auf, um Speicherlecks zu vermeiden.

Häufig gestellte Fragen (FAQs)

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.