博客

在vue中，可以使用标签将组件包裹起来，用于缓存不活动的组件实例，从而提高应用的性能

<template>
  <div>
    <component-one v-if="showOne"></component-one>
    <component-two v-else></component-two>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
import ComponentOne from './ComponentOne.vue'
import ComponentTwo from './ComponentTwo.vue'

export default {
  components: {
    ComponentOne,
    ComponentTwo
  },
  data () {
    return {
      showOne: true
    }
  },
  methods: {
    toggle () {
      this.showOne = !this.showOne
    }
  }
}
</script>

在上面这个示例中, 每当切换到 ComponentOne 模块时会创建一个新的实例.

使用 可以实现缓存已挂载的实例，避免多次创建和销毁,

可以通过添加 include 和 exclude 属性设置需要/排除缓存的组件名。

<template>
  <div>
    <keep-alive include="ComponentOne">
      <component-one v-if="showOne"></component-one>
    </keep-alive>
    <keep-alive exclude="ComponentOne">
      <component-two v-else></component-two>
    </keep-alive>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
import ComponentOne from './ComponentOne.vue'
import ComponentTwo from './ComponentTwo.vue'

export default {
  components: {
    ComponentOne,
    ComponentTwo
  },
  data () {
    return {
      showOne: true
    }
  },
  methods: {
    toggle () {
      this.showOne = !this.showOne
    }
  }
}
</script>

在这个示例中，标签分别缓存了 ComponentOne 和 ComponentTwo 组件的实例。