What lifecycle hooks are practical for managing API calls in Vue?

onMounted() and onBeforeUnmount() provide the most practical lifecycle hooks for API calls, ensuring data fetches occur post-DOM render while enabling cleanup to prevent memory leaks.​

Developers use onMounted() for initial API fetches since DOM elements and refs become accessible, avoiding hydration mismatches in SSR apps.​

onBeforeUnmount() handles AbortController signals to cancel pending requests, critical for navigation-heavy SPAs with rapid route changes.​‍

created() suits lightweight data initialization but risks blocking renders; pair with Suspense for async patterns in Vue 3.4+.

Code

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const data = ref([])
const controller = ref(null)

onMounted(async () => {
  controller.value = new AbortController()
  data.value = await fetch('/api/data', { signal: controller.value.signal }).then(r => r.json())
})

onBeforeUnmount(() => controller.value?.abort())
</script>