How to use vue's keep-alive to optimize page performance

How to use Vue’s keep-alive to optimize page performance

Introduction:
When developing Vue projects, we often encounter a situation: when switching between pages, we do not want to destroy the current page component instance, but caches it to improve performance on next access. Vue provides the keep-alive component, which can easily implement the caching function of the component. This article will introduce in detail how to use keep-alive to optimize page performance.

1. Introduction to keep-alive components
Vue’s keep-alive component is an abstract component that can cache the components it wraps and directly render the component instances in the cache the next time it is accessed. This avoids the overhead of repeatedly creating and destroying components, thereby improving performance.

2. Basic usage of keep-alive
Using the keep-alive component is very simple. You only need to nest a tag outside the component that needs to be cached, for example:

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

In the above code, is the routing exit provided by Vue Router. We can replace it with any component that needs to be cached.

3. Attributes and events of keep-alive
keep-alive provides some attributes and events for controlling and monitoring the life cycle of component cache.

1. Attributes
   keep-alive component has two main attributes:

• include: consists of specifying the name of the component that needs to be cached array. Only components specified by the include attribute will be cached, other components will not be cached. For example:

  <keep-alive :include="['Home', 'About']">
  <router-view></router-view>
  </keep-alive>

  In the above code, only components named Home and About will be cached, and other components will not be cached.

• exclude: Specify an array of component names that do not need to be cached. Components specified by the exclude attribute will not be cached, but other components will be cached. For example:

  <keep-alive :exclude="['Login']">
  <router-view></router-view>
  </keep-alive>

  In the above code, the component named Login will not be cached, but other components will be cached.

2. Events
   keep-alive component provides two events for listening to the life cycle of the cache component:

• activated: Triggered when the component is activated. For example:

  <keep-alive @activated="handleActivated">
  <router-view></router-view>
  </keep-alive>
  
  methods: {
  handleActivated() {
    console.log('Component activated');
  }
  }

  In the above code, when the component is activated, the handleActivated method will be called to print a log.

• deactivated: Triggered when the component is deactivated. For example:

  <keep-alive @deactivated="handleDeactivated">
  <router-view></router-view>
  </keep-alive>
  
  methods: {
  handleDeactivated() {
    console.log('Component deactivated');
  }
  }

  In the above code, when the component is deactivated, the handleDeactivated method will be called to print a log.

4. Example Demonstration
Below we use a practical example to demonstrate how to use keep-alive to optimize page performance.

1. Create a Vue project and install Vue Router:

   vue create keep-alive-demo
   cd keep-alive-demo
   vue add router

2. Modify the src/App.vue file and change Wrapped in the tag:

   <template>
     <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
     </div>
   </template>

3. In the src/router/index.js file, add two routes, corresponding to the two components that need to be cached:

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import Home from '@/views/Home.vue';
   import About from '@/views/About.vue';
   
   Vue.use(VueRouter);
   
   const routes = [
     {
    path: '/',
    name: 'Home',
    component: Home,
     },
     {
    path: '/about',
    name: 'About',
    component: About,
     },
   ];
   
   const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes,
   });
   
   export default router;

4. Create Home.vue and About.vue components in the src/views directory and fill in the content:
   Home.vue:

   <template>
     <div>
    <h1 id="Home">Home</h1>
    <button @click="handleButtonClick">Click me</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
    handleButtonClick() {
      console.log('Button clicked');
    },
     },
   };
   </script>

About.vue:

<template>
  <div>
    <h1 id="About">About</h1>
    <button @click="handleButtonClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      console.log('Button clicked');
    },
  },
};
</script>

So far, we have completed a simple example of using keep-alive to optimize page performance.

Conclusion:
By using Vue’s keep-alive component, we can easily implement the caching function of the component, thereby improving the rendering performance of the page. In actual projects, some frequently accessed and operated components can be cached as needed to avoid repeated component creation and destruction and optimize the user's interactive experience. I hope this article will help you understand and use keep-alive!

The above is the detailed content of How to use vue's keep-alive to optimize page performance. For more information, please follow other related articles on the PHP Chinese website!