keepAlive源码中用cache存储需要缓存的组件；

cache是一个对象， key优先取组件的key，组件没有时则取组件对应的文件

js 复制代码

const key = vnode.key == null ? comp : vnode.key;
const cachedVNode = cache.get(key);

comp为对象，重要的key-value如下

__file: "/Users//code/ /src/views///edit.vue"
__hmrId: "397d0d72"
__scopeId: "data-v-397d0d72"

js 复制代码

 <keep-alive>
   <component :is="Component" :key="$route.path" />
 </keep-alive>

在使用时，将key设置为路由的path。

如果不设置的话，会遇到下面的问题

通常我们开发一个编辑页面的时，不同id对应的编辑页面只会写一个组件，当切换不同的编辑页面时，是根据id区分的。假如我们不设置key，则所有编辑页面对应的key是一个，即是该组件对应的文件路径。所以不同的编辑页面会获取同一份组件实例。

假设我们不介意它们公用同一份组件实例，通过监听路由上的id，然后从数据库中获取各自的数据，再渲染出来。但这也会存在一个问题。当用户在此数据基础上进行更改后，离开该页面再进入时，当前编辑的数据又会被数据库获取的数据覆盖掉。所以我们必须设置它的key为路由的path。不同编辑页面路由path中的id时不同的，所以不同的编辑页面各自会缓存一个组件实例，这样他们就不会相互影响了。

KeepAlive缓存的逻辑

keepAlive源码中用cache存储需要缓存的组件；

在使用时， 将key设置为路由的path。

在使用时，将key设置为路由的path。