Hey there! Let's break down how Vue's <keep-alive> works and how to integrate it into your current tab setup. I see you're using dynamic components for tabs—this is exactly the kind of scenario where <keep-alive> shines!

What is <keep-alive>? #

<keep-alive> is Vue's built-in component that caches inactive component instances instead of destroying them. This means:

• Component state (like input values, scroll positions) is preserved when you switch away and come back
• Lifecycle hooks like created or mounted only run once (the first time the component is rendered), instead of every time you switch to the tab
• You get better performance since you're not re-rendering components from scratch every time

Fixing Your Tab Setup with <keep-alive> #

Right now, your dynamic component gets destroyed and recreated every time you switch tabs—that's why your alert() fires on every tab switch. Let's wrap it in <keep-alive> to change that.

Modified HTML Code #

<button 
  v-for="tab in tabs" 
  :key="tab.name" 
  :class="['tab-button', { active: currentTab.name === tab.name }]" 
  @click="currentTab = tab"
>
  {{ tab.name }}
</button>

<!-- Wrap your dynamic component in <keep-alive> -->
<keep-alive>
  <component :is="currentTab.component" class="tab"></component>
</keep-alive>

Updated JS Code (with State Preservation Example) #

Let's adjust your component definitions to show the state-preserving effect:

var tabs = [
  { 
    name: 'Home', 
    component: {
      template: '<div>Home Tab <input type="text" placeholder="Type something here..."></div>',
      created() {
        alert('Home component created ONCE!');
      },
      activated() {
        console.log('Home component is now active');
      },
      deactivated() {
        console.log('Home component is now inactive');
      }
    }
  },
  { 
    name: 'Profile', 
    component: {
      template: '<div>Profile Tab <p>Your saved profile data stays here!</p></div>'
    }
  }
];

new Vue({
  el: '#app',
  data: {
    currentTab: tabs[0],
    tabs: tabs
  }
});

Key Things to Note #

• Lifecycle Hooks: When using <keep-alive>, components get two new hooks:
  • activated: Runs when the component is switched back to (instead of mounted)
  • deactivated: Runs when the component is switched away from (instead of unmounted)
• Selective Caching: If you only want to cache specific components, use the include or exclude props:

  <!-- Cache only components named "Home" and "Profile" -->
  <keep-alive include="Home,Profile">
    <component :is="currentTab.component"></component>
  </keep-alive>
  

• Force Refresh: If you ever need to reset a cached component, add a unique key to the dynamic component:

  <keep-alive>
    <component :is="currentTab.component" :key="currentTab.name"></component>
  </keep-alive>
  

  (Note: This will destroy and recreate the component on tab switch, so use it only when necessary.)

Try out this modified code—you'll notice that when you type something in the Home tab's input and switch to Profile, the text stays there when you come back! The alert() will only fire once, when the Home component is first created.

内容的提问来源于stack exchange，提问作者user3599803