vue3使用 keep-alive对iframe进行缓存

Posted 2023-03-09

参考技术A 使用keep-alive缓存不了iframe界面原因

【1】原理：Vue 的缓存机制并不是直接存储 DOM 结构，而是将 DOM 节点抽象成了一个个 VNode节点。因此，Vue 的 keep-alive 缓存也是基于 VNode节点 而不是直接存储 DOM 节点。在需要渲染的时候从Vnode渲染到真实DOM上。
【2】参数：Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓存。
　　include: 字符串或正则表达式。只有匹配的组件会被缓存。
　　exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
【3】Keep-alive 组件提供了两个生命钩子函数，分别是 activated 和 deactivated 。
　　activated ：当页面存在缓存的时候执行该函数。
　　deactivated ：在页面结束时触发该方法，可清除掉滚动方法等缓存。

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

不使用 keep-alive ，因为vnode原理不适用。直接把打开过得iframe中的dom保存下来。通过v-show显示隐藏

iframeComponentsArray这个数组是打开过的iframe页面数组