How Vue's keep-alive component improves user page switching smoothness

How Vue’s keep-alive component improves the smoothness of user page switching

In modern web applications, it is very common for users to switch pages frequently. Such frequent page switching may cause performance issues such as page re-rendering and component reloading, making the page switching experience less smooth. As a popular front-end framework, Vue.js provides a component called keep-alive, which can help us improve the smoothness of user page switching.

The function of the keep-alive component is to cache the state of the component to avoid repeated rendering of the component. When a component is wrapped in a keep-alive component, it is cached rather than destroyed. In this way, every time you switch to the same component, Vue will directly read the component's state from the cache, thus saving the time of component re-rendering.

Below we use a simple example to illustrate how the keep-alive component improves the smoothness of user page switching.

Suppose we have two components: ComponentA and ComponentB. ComponentA is a list component used to display some data; ComponentB is a details component used to display detailed information of an item in the list. When the user switches to the details page by clicking on an item in the list, we want to keep the scroll position of the list page unchanged.

We first introduce the keep-alive component in App.vue and set the name attribute on the corresponding route to specify the cached identifier of the component.

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

<script>
export default {
  name: 'App'
}
</script>

Then, in the list component ComponentA, we need to modify the content of the template and display the list items through loop traversal.

<template>
  <ul>
    <li v-for="item in list" :key="item.id" @click="showDetail(item)">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  methods: {
    showDetail(item) {
      // 切换到详情页，并传递选中项的数据
      this.$router.push({
        name: 'Detail',
        params: { item }
      })
    }
  }
}
</script>

In the detail component ComponentB, we save the scroll position when the page is loaded in the mounted hook function, and then restore the position in the activated hook function.

<template>
  <div>
    <h2>{{ selectedItem.name }}</h2>
    <p>Details: {{ selectedItem.details }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: {}
    }
  },
  mounted() {
    // 保存页面加载时的滚动位置
    this.$store.commit('saveScrollPosition', window.pageYOffset)
  },
  activated() {
    // 恢复页面切换时的滚动位置
    window.scrollTo(0, this.$store.state.scrollPosition)
  },
  created() {
    // 获取传递过来的选中项数据
    this.selectedItem = this.$route.params.item
  }
}
</script>

Finally, we add the route of ComponentB in the routing configuration and specify the name attribute.

import Vue from 'vue'
import VueRouter from 'vue-router'
import ComponentA from '@/components/ComponentA.vue'
import ComponentB from '@/components/ComponentB.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'ComponentA',
    component: ComponentA
  },
  {
    path: '/detail',
    name: 'Detail',
    component: ComponentB
  }
]

const router = new VueRouter({
  routes
})

export default router

By using the keep-alive component, we can retain the scroll position of the list page when the user switches pages, thus providing a better user experience. This is because the list component is cached rather than re-rendered. When we switch to the list page again, the state of the component will be restored directly without reloading the data and displaying the component.

In summary, Vue’s keep-alive component can improve the smoothness of user page switching. By caching the status of the component, it can reduce the re-rendering of the component, thereby improving the user experience. In scenarios where page switching performance needs to be improved, rational use of keep-alive components will be a good choice.

The above is the detailed content of How Vue's keep-alive component improves user page switching smoothness. For more information, please follow other related articles on the PHP Chinese website!