KeepAlive缓存的逻辑

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

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

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

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

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

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

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

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

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

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