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时不同的, 所以不同的编辑页面各自会缓存一个组件实例, 这样他们就不会相互影响了。

相关推荐
勇敢di牛牛1 小时前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
Sheldon一蓑烟雨任平生1 小时前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style
夏天想2 小时前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
yiludegeX2 小时前
fluth-vue: 体验流式编程范式之美
vue.js·前端框架·rxjs
没有鸡汤吃不下饭2 小时前
H5移动端页面实现快递单号条形码/二维码扫描,亲测可行!!
前端·javascript·vue.js
Java陈序员2 小时前
宝藏工具站!一个轻量实用的在线工具集合!
vue.js·nuxt.js
喝西瓜汁的兔叽Yan2 小时前
书架效果的实现
javascript·vue.js
GBVFtou3 小时前
vue3 options模式
前端·vue.js
我是日安3 小时前
从零到一打造 Vue3 响应式系统 Day 26 - 数组长度变更处理
前端·javascript·vue.js
jason_yang3 小时前
vue3中使用auto-import与cdn插件冲突问题
vue.js·vite·cdn