KeepAlive缓存的逻辑

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

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

js 复制代码
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"
js 复制代码
 <keep-alive>
   <component :is="Component" :key="$route.path" />
 </keep-alive>

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

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

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

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

相关推荐
九十一18 分钟前
vue3事件总线与emit
前端·vue.js
丨Sky丨夜吻23 分钟前
vscode扩展
ide·vue.js·vscode
青灬河1 小时前
实现企业级全栈应用服务框架-Elpis(一)
vue.js·node.js
一只小风华~2 小时前
学习笔记:Vue Router 中的链接匹配机制与样式控制
前端·javascript·vue.js·笔记·学习·ecmascript
FuckPatience4 小时前
前端Vue 后端ASP.NET Core WebApi 本地调试交互过程
前端·vue.js·asp.net
北城以北88884 小时前
Vue-- Axios 交互(二)
javascript·vue.js·交互
我总是词不达意5 小时前
vue3 + el-upload组件集成阿里云视频点播从本地上传至点播存储
前端·vue.js·阿里云·elementui
北城以北88885 小时前
Vue-- Axios 交互(一)
前端·javascript·vue.js
前端开发爱好者5 小时前
Vite➕ 收费了!
前端·javascript·vue.js
羊羊小栈6 小时前
基于「多模态大模型 + BGE向量检索增强RAG」的新能源汽车故障诊断智能问答系统(vue+flask+AI算法)
vue.js·人工智能·算法·flask·汽车·毕业设计·大作业