Keep-alive for expensive components in Vue - Performance & Optimization

Performance: Keep-alive for expensive components

MEDIUM IMPACT

This affects the rendering speed and responsiveness by caching component state and DOM to avoid re-creation on each render.

Rendering a component with heavy setup multiple times

Vue

<template>
  <keep-alive>
    <ExpensiveComponent v-if="show" />
  </keep-alive>
</template>
<script setup>
import ExpensiveComponent from './ExpensiveComponent.vue'
import { ref } from 'vue'
const show = ref(true)
</script>

Component is cached in memory; toggling only shows/hides without re-creating, saving setup time.

📈 Performance GainAvoids repeated setup and DOM rebuild, reducing blocking time to near zero on toggle.

Rendering a component with heavy setup multiple times

Vue

<template>
  <ExpensiveComponent v-if="show" />
</template>
<script setup>
import ExpensiveComponent from './ExpensiveComponent.vue'
import { ref } from 'vue'
const show = ref(true)
</script>

Component is destroyed and recreated on each toggle, causing repeated expensive setup and DOM construction.

📉 Performance CostTriggers full re-render and setup on each toggle, blocking interaction for 100+ ms depending on complexity.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Without keep-alive	Creates and destroys DOM nodes each toggle	Triggers full reflow on each toggle	High paint cost due to DOM rebuild	[X] Bad
With keep-alive	Reuses cached DOM nodes, minimal DOM ops	No reflow from component recreation	Low paint cost, only visibility changes	[OK] Good

Rendering Pipeline

When using keep-alive, Vue caches the component instance and its DOM nodes after first render. On subsequent toggles, Vue skips the full creation and layout steps, reusing cached DOM.

→Component Initialization

→Layout

→Paint

⚠️ BottleneckComponent Initialization and Layout during re-creation

Core Web Vital Affected

INP

This affects the rendering speed and responsiveness by caching component state and DOM to avoid re-creation on each render.

Optimization Tips

1Use keep-alive to cache expensive components that toggle frequently.

2Avoid unnecessary component destruction to reduce layout and paint costs.

3Check performance profiles to confirm reduced scripting and layout times.

Performance Quiz - 3 Questions

What is the main performance benefit of using keep-alive for expensive Vue components?

A It reduces the initial bundle size by code splitting.

B It lazy loads the component only when needed.

C It caches the component instance to avoid re-creation on toggling.

D It automatically optimizes CSS for the component.

DevTools: Performance

How to check: Record a performance profile while toggling the component visibility. Look for scripting and rendering time spikes.

What to look for: Without keep-alive, expect long scripting and layout times on each toggle. With keep-alive, these times should be minimal.