关于vue的组件缓存

Vue 的组件缓存是通过 keep-alive 组件来实现的。这个组件的主要作用是在组件切换时保留组件的状态，以避免重新渲染和销毁组件。

如果你没有为组件设置专门的 name 属性，Vue 默认会使用组件的文件名作为组件的名称。这样会导致在组件切换时，由于每个组件的名称都是不同的，keep-alive 组件无法将状态保存下来，从而失去了缓存的效果。

因此，为了能够让组件缓存生效，在使用 keep-alive 组件时，需要为每个组件设置一个唯一的 name 属性。这样可以确保在组件切换时，keep-alive 组件能够正确地缓存和还原组件的状态。

例如：

在下面的例子中，使用了 router-view 来实现组件的动态切换，并且通过 :key="$route.name" 给每个组件设置了一个唯一的 key，以确保 keep-alive 组件能够正确地缓存和还原组件的状态。

<template>
  <div>
    <keep-alive>
      <router-view :key="$route.name"></router-view>
    </keep-alive>
  </div>
</template