What are some examples of using keep-alive in Vue?

What are some examples of using keep-alive in Vue?

Keep-alive is a built-in component in Vue that allows you to cache components when they are not active. This can improve performance by avoiding unnecessary re-renders. Would you like to see some specific examples?

Yes, please provide a few code snippets.

Sure! Here's a simple example:

<template>
  <keep-alive>
    <component :is="currentComponent" />
  </keep-alive>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    switchComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  }
};
</script>

What happens when I switch components?

When you switch components, the inactive component is cached by keep-alive, so when you switch back, it retains its state. This is useful for preserving user input or scroll positions.