Thursday 18 January 2024

What is the purpose of keep alive tag in Vuejs explain with example? 080

 What is the purpose of keep alive tag in Vuejs explain with example?

The <keep-alive> tag in Vue.js serves the purpose of caching inactive components to enhance performance and user experience by preventing unnecessary re-renders when switching between them.

How It Works:

  1. Wrapping Components: You wrap dynamic components within the <keep-alive> tag to activate caching:

Code snippet

  <component :is="currentView"></component>

  1. Caching Mechanism:

  • When a component is first rendered within <keep-alive>, its instance is cached.

  • When switching away from it, the instance remains in memory instead of being destroyed.

  • When returning to it, Vue reuses the cached instance, avoiding re-creation and re-rendering.


  • Performance Optimization: Caching reduces re-renders, improving performance for components that involve:

  • Expensive computations

  • Data fetching

  • DOM manipulations

  • Preserving State: Cached components maintain their state, leading to a smoother user experience, especially for:

  • Forms with user input

  • Components with interactive elements


Code snippet

    <component :is="currentTabComponent"></component>

export default {
  data() {
    return {
      currentTabComponent: 'Tab1',
  components: {
    Tab1: { /* ... */ },
    Tab2: { /* ... */ },
    Tab3: { /* ... */ },

When to Use <keep-alive>:

  • Components that involve expensive computations or data fetching.

  • Forms or components that need to preserve user input or state.

  • Scenarios where frequent switching between components causes noticeable performance issues.


  • Caching can consume more memory, so use it judiciously.

  • It might not be suitable for components that change frequently.

  • Cached components might not receive updates from shared state or props until they are re-activated.

No comments:

Post a Comment

Note: only a member of this blog may post a comment.