What is the difference between dynamic and async components in Vue?
Compare Vue dynamic components and async components: switching with <component :is> versus lazy-loading with defineAsyncComponent, and how to combine both.
Expected Interview Answer
Dynamic components let you swap which already-loaded component renders at a spot using <component :is="...">, while async components defer loading a component's code until it is actually needed, using defineAsyncComponent to lazy-load it.
Dynamic components are about choosing between components at runtime; the components are typically already imported and available. Async components are about performance and bundle splitting; defineAsyncComponent returns a wrapper that fetches the real component on demand and can show loading and error states. The two are complementary: you can render an async component through <component :is> so a tab is both dynamically selected and lazily loaded.
- Dynamic components enable flexible, config-driven UIs like tabs and wizards
- Async components reduce initial bundle size via code splitting
- Async components support loading, error, delay, and timeout options
- Combining both allows lazy tabs that load only when opened
- Both keep component switching declarative
AI Mentor Explanation
A dynamic component is like a captain rotating bowlers already warmed up in the field, swapping who bowls the next over instantly. An async component is like calling up a specialist from the pavilion who still needs to pad up before playing. One picks among ready players; the other summons and prepares a player only when the match actually needs them.
Step-by-Step Explanation
Step 1
Choose the mechanism
Use dynamic components when you need to switch which component shows; use async when you want to defer loading.
Step 2
Render dynamically
Bind <component :is="currentTab" /> to a variable holding a component or its registered name.
Step 3
Define an async component
Wrap an import with defineAsyncComponent(() => import('./Heavy.vue')) to lazy-load it.
Step 4
Add loading and error states
Pass loadingComponent, errorComponent, delay, and timeout options to the async definition.
Step 5
Combine both when needed
Render an async component through <component :is> so a tab is both selected and lazily loaded.
What Interviewer Expects
- Clear distinction: switching vs deferred loading
- Knowing <component :is> for dynamic rendering
- Knowing defineAsyncComponent for lazy loading
- Awareness of loading/error/delay/timeout options
- Understanding the two can be combined
Common Mistakes
- Thinking dynamic components lazy-load code by themselves
- Assuming async components handle which component to show
- Forgetting to keep-alive dynamic components when state should persist
- Not providing error or loading states for async components
Best Answer (HR Friendly)
“Dynamic components are about choosing which piece of the interface to show at a given spot, while async components are about loading a piece's code only when it is actually needed. One is about flexibility, the other about performance, and they work well together.”
Code Example
<template>
<component :is="tabs[current]" />
</template>
<script setup>
import { ref, defineAsyncComponent } from 'vue'
const tabs = {
overview: defineAsyncComponent(() => import('./Overview.vue')),
reports: defineAsyncComponent(() => import('./Reports.vue')),
}
const current = ref('overview')
</script>Follow-up Questions
- How does defineAsyncComponent handle loading and error states?
- Why would you wrap a dynamic component in <KeepAlive>?
- How do async components help reduce initial bundle size?
- Can you use <component :is> with a plain HTML tag name?
- What happens if an async component's import fails?
MCQ Practice
1. What is the primary purpose of a dynamic component in Vue?
Dynamic components use <component :is> to swap which already-available component renders.
2. Which API creates an async (lazy-loaded) component?
defineAsyncComponent wraps a dynamic import so the component's code loads only when needed.
3. Which options can defineAsyncComponent accept?
The object form accepts loadingComponent, errorComponent, delay, and timeout to control the loading experience.
Flash Cards
What does a dynamic component do? — Switches which component renders at a spot via <component :is>.
What does an async component do? — Defers loading a component's code until needed, via defineAsyncComponent.
How do you combine them? — Render an async component through <component :is> for lazy, dynamically-chosen tabs.
What options tune async loading? — loadingComponent, errorComponent, delay, and timeout.