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

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

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

文章中提到的原因

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

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

阅读 5.4k
3 个回答

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 时也没办法去设置内容信息,去恢复之前的“状态”。

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏