目录

keep-alive 

使用 keep-alive 的示例代码:

手动清除组件缓存的示例代码:

keep-alive 组件有以下几个优点:

keep-alive 的原理:

使用 keep-alive 组件,你可以包裹需要缓存的组件,然后这些组件在切换时将会被缓存起来,而不是每次都重新创建。

keep-alive 

使用 keep-alive 的示例代码:

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

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

我们有两个组件 ComponentAComponentB,点击按钮可以在两者之间进行切换。这两个组件被包裹在 keep-alive 组件中,所以切换时不会销毁和重新创建它们的实例。


如果你想手动清除 keep-alive 中的组件缓存,可以使用 includeexclude 属性。这两个属性接受一个字符串或正则表达式的数组,用于匹配需要缓存或排除的组件。

手动清除组件缓存的示例代码:

<template>
  <div>
    <button @click="clearCache">清除缓存</button>
    <keep-alive :include="includedComponents" :exclude="excludedComponents">
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
      includedComponents: ['ComponentA'], // 需要缓存的组件列表
      excludedComponents: [], // 不需要缓存的组件列表
    };
  },
  methods: {
    clearCache() {
      this.$refs.keepAlive.cache = {};
    },
  },
};
</script>

添加一个按钮来触发清除缓存。includedComponents 数组用于指定需要缓存的组件,而 excludedComponents 数组用于指定不需要缓存的组件。通过修改这两个数组,你可以控制哪些组件应该被缓存或排除。

点击清除缓存按钮时,我们调用 this.$refs.keepAlive.cache = {}; 来直接清空 keep-alive 组件的缓存。


keep-alive 组件有以下几个优点:

  • 减少组件的销毁和重新创建:使用 keep-alive 包裹需要缓存的组件,可以避免在组件切换时反复销毁和重新创建组件实例。这样可以节省性能,提高页面响应速度。

  • 缓存组件状态:keep-alive 可以缓存包裹的组件的状态,包括数据、计算属性、观察者等。当组件被缓存起来时,这些状态都会被保留,再次渲染时可以直接使用,避免了重新初始化的开销。

  • 提高组件复用性:通过使用 keep-alive,我们可以将一些通用的组件进行缓存,让它们可以在多个地方重复使用。这样可以减少代码冗余,并提高整体项目的可维护性。

keep-alive 的原理:

  • 首次渲染:当第一次渲染 keep-alive 组件时,包裹的组件会被创建并渲染。同时,组件实例会被缓存起来。

  • 切换组件:如果切换到其他组件,之前缓存的组件实例将被保留在内存中。新的组件会被创建并渲染,但之前的组件实例不会被销毁。

  • 再次切换到已缓存的组件:如果再次切换回已经缓存的组件,之前的组件实例将被重新激活,并重新显示在页面上。这样可以保留组件的状态和数据,避免重新初始化。

  • 清除缓存:如果需要手动清除某个组件的缓存,可以通过设置 includeexclude 属性来排除或包含特定的组件。也可以通过直接修改 $refs 对象来清空整个 keep-alive 组件的缓存。

Logo

前往低代码交流专区

更多推荐