Lazy loading components in Vue - Step-by-Step Execution

Concept Flow - Lazy loading components

Start App

↓

User triggers component

↓

Check if component loaded?

Yes→Render component

No↓

Load component asynchronously

↓

Component loaded

↓

Render component

The app waits until a component is needed, then loads it asynchronously before rendering.

Execution Sample

Vue

import { defineAsyncComponent } from 'vue';

const LazyComp = defineAsyncComponent(() => import('./LazyComp.vue'));

export default {
  components: { LazyComp }
};

This code sets up a Vue component to load only when used, saving initial load time.

Execution Table

Step	Action	Component Loaded?	Result
1	App starts, no lazy component used	No	App renders without LazyComp
2	User triggers LazyComp display	No	Start loading LazyComp asynchronously
3	LazyComp finishes loading	Yes	LazyComp is ready to render
4	Render LazyComp	Yes	LazyComp appears on screen
5	User triggers LazyComp again	Yes	LazyComp renders immediately without loading

💡 Lazy component loads only once when first needed, then reuses loaded version.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
LazyComp Loaded	false	false	true	true	true

Key Moments - 2 Insights

Why doesn't the lazy component load when the app starts?

Because the component is wrapped in defineAsyncComponent and only loads when triggered, as shown in execution_table step 2.

What happens if the user triggers the lazy component multiple times?

After the first load (step 3), the component is cached and renders immediately on subsequent triggers (step 5).

Visual Quiz - 3 Questions

Look at the execution table, at which step does the lazy component finish loading?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Check the 'Component Loaded?' column in the execution_table at each step.

According to variable_tracker, what is the value of 'LazyComp Loaded' after step 4?

A false

B undefined

C true

D null

💡 Hint

Look at the 'After Step 4' column for 'LazyComp Loaded' in variable_tracker.

If the user never triggers the lazy component, what will be the value of 'LazyComp Loaded'?

A true

B false

C null

D undefined

💡 Hint

Refer to the 'Start' value in variable_tracker and step 1 in execution_table.

Concept Snapshot

Lazy loading components in Vue:
- Use defineAsyncComponent(() => import('...'))
- Component loads only when first used
- Saves initial load time
- After loading, component is cached
- Subsequent uses render instantly

Full Transcript

Lazy loading components in Vue means the app does not load some components until the user needs them. This saves time when the app starts. The code uses defineAsyncComponent with a function that imports the component file. When the user triggers the component, Vue loads it asynchronously. After loading, the component is cached and shows immediately on later uses. The execution table shows the steps: app start without loading, user triggers load, component loads, then renders. The variable tracker shows the loading state changes from false to true. This helps beginners see how lazy loading delays work and improves app speed.