How to implement page element reuse with the keep-alive component in Vue

Vue is a popular JavaScript framework with rich features and easy-to-use API. One of the commonly used functions is the keep-alive component, which can reuse page elements and improve page performance and user experience.

In Vue, when the component is destroyed, all data and state will also be destroyed. However, sometimes we want to be able to retain the state of a component so that users can quickly restore the data when they visit again. In this case, the keep-alive component comes in handy.

keep-alive Components can cache the components they wrap, rather than destroying and recreating them each time. When the component leaves the view, it is not destroyed, but remains in memory, waiting for the next use. When the component is rendered again, the component instance in the cache will be used directly without re-creating it.

Let’s look at a specific example. Suppose we have a list component List whose child components are Item, each Item has its own state.

List Component:

<template>
  <div>
    <button @click="showList = !showList">{{ showList ? '隐藏' : '显示' }}列表</button>
    <hr>
    <keep-alive>
      <Item v-if="showList" v-for="item in list" :key="item.id" :data="item"></Item>
    </keep-alive>
  </div>
</template>

<script>
import Item from './Item'

export default {
  components: { Item },
  data() {
    return {
      showList: true,
      list: [
        { id: 1, name: '第一项' },
        { id: 2, name: '第二项' },
        { id: 3, name: '第三项' }
      ]
    }
  }
}
</script>

Item Component:

<template>
  <div>
    <h3>{{ data.name }}</h3>
    <button @click="count++">增加计数</button>
    <p>计数: {{ count }}</p>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      count: 0
    }
  }
}
</script>

In the above example, we are in List The keep-alive component is used in the component to wrap the Item component. When the button is clicked, the list is shown or hidden without being destroyed and recreated.

Note that when using the keep-alive component, we need to set a unique key value for each Item so that Vue can be correct Cache and reuse components.

In addition, the cached component instance does not call the created and destroyed life cycle hook functions, but instead calls activated and deactivated Hook function. So if you want to do some operations when the component is cached, you can use activated. If you want to do some operations when the component leaves the view, you can use deactivated.

To summarize, the keep-alive component in Vue can reuse page elements and improve page performance and user experience. By wrapping components that need to be cached in keep-alive components, we can avoid unnecessary component destruction and re-creation, thereby improving the loading speed and responsiveness of the page. At the same time, you need to pay attention to setting a unique key value for each cached component, and you can use the activated and deactivated hook functions to operate the component.

The above is the detailed content of How to implement page element reuse with the keep-alive component in Vue. For more information, please follow other related articles on the PHP Chinese website!