Vue KeepAlive为何无法正常缓存 iframe？

  • Z时代
  • 2024-03-01
  • 分类：IT

如题。在掘金看到的一篇文章，但是作者对于具体的原因没有说明清楚，希望有大神能够解答。
描述如下：

最近做了个项目，其中有个页面是由 iframe 嵌套了一个另外的页面，在运行的过程中发现 KeepAlive 并不生效，每次切换路由都会触发 iframe 页面的重新渲染

文章中提到的原因

iframe 很特别，当其插入到页面时会重新加载，这是浏览器特性，与 Vue 无关

附上原帖链接：
KeepAlive 为什么不能缓存 iframe

回答：

keep-alive缓存的是虚拟节点，并不是缓存真实dom。iframe页里的内容并不属于节点的信息，所以使用keep-alive依然会重新渲染iframe内的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口，即使把节点保存下来，在渲染时iframe页还是刷新的

回答：

keep-alive是vue自己实现的，缓存自己的虚拟dom。iframe vue做不到，也无法操作。所以每次打开都是重新请求。如果iframe能缓存的话，那前端微服务就简单多了

回答：

这篇文章里面也没提到是怎么使用的 iframe 啊？是每次修改 src 还是 iframe 内部的页面跳转。
只能理解文章想要说的业务场景是，以下代码块中的 component 可能会被渲染成一个包含 iframe 页面组件？

<router-view v-slot="{ Component }">
  <keep-alive :include="keepAliveList">
    <component :is="Component"></component>
  </keep-alive>
</router-view>

然后每次切换路由再返回到有 iframe 页面时，iframe 会显示重新载入。
这个现象我也做了一个简单的Demo复现了。

原因我看文章内也说了，就是 iframe 插入到页面时会重新加载。这个是浏览器部分的原因（而且不光是这样，其实你移动 iframe 元素到页面其他位置也会重新加载）。
另外一部分就是 iframe 的元素节点上是不会存有内部浏览信息的，所以每次转换成 vnode 时会丢失内部信息。但是就算能获取到内部信息，在第二次渲染 iframe 时也没办法去设置内容信息，去恢复之前的“状态”。

所以就是从浏览器的方面和具体功能实现方面都有原因存在。

以上是 Vue KeepAlive为何无法正常缓存 iframe？ 的全部内容， 来源链接： utcz.com/p/934558.html

回到顶部