vue列表缓存keep-alive

Posted 2023-05-09

参考技术A 列表查询出约课记录之后，跳转到详情后再返回页面内容刷新，之前搜索的结果就没有了，为了解决这一问题，使用了keep-alive组件来实现页面缓存。

keep-alive

keep-alive.js源码：

只执行一次的钩子：当vnode.componentInstance和keepAlive为true时，不再进入$mount过程，也就不会执行mounted以及之前的钩子函数（beforeCreated、created、mounted）

可重复执行的activated：在patch阶段，最后会执行invokeInsertHook函数，这个函数调用组件实例的insert钩子，insert钩子中调用了activateChildComponent函数，递归执行子组件中的activated钩子函数

pageList → pageDetail → pageList，pageList保存原有状态；pageList → 其他 → pageList，pageList初始化状态

pageList → pageDetail → pageList，pageList保存原有状态；pageList → 其他 → pageList，pageList初始化状态

问题：方法二中，pageList → pageDetail → 其他 → pageList，pageList采用了缓存的数据， 解决：其他页面中的beforeRouteLeave增加 this.$store.dispatch('setCacheList', '')

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

参考技术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页面数组