vue3使用 keep-alive對(duì)iframe進(jìn)行緩存

使用keep-alive緩存不了iframe界面原因

(1)vue中的keep-alive

【1】原理:Vue 的緩存機(jī)制并不是直接存儲(chǔ) DOM 結(jié)構(gòu),而是將 DOM 節(jié)點(diǎn)抽象成了一個(gè)個(gè) VNode節(jié)點(diǎn)。因此,Vue 的 keep-alive 緩存也是基于 VNode節(jié)點(diǎn) 而不是直接存儲(chǔ) DOM 節(jié)點(diǎn)。在需要渲染的時(shí)候從Vnode渲染到真實(shí)DOM上。
【2】參數(shù):Keep-alive 組件提供了 include 和 exclude 兩個(gè)屬性,允許組件有條件的進(jìn)行緩存。
  include: 字符串或正則表達(dá)式。只有匹配的組件會(huì)被緩存。
  exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會(huì)被緩存。
【3】Keep-alive 組件提供了兩個(gè)生命鉤子函數(shù),分別是 activated 和 deactivated 。
  activated :當(dāng)頁面存在緩存的時(shí)候執(zhí)行該函數(shù)。
  deactivated :在頁面結(jié)束時(shí)觸發(fā)該方法,可清除掉滾動(dòng)方法等緩存。

(2)iframe中keep-alive機(jī)制失效原因:

iframe頁里的內(nèi)容并不屬于節(jié)點(diǎn)的信息,所以使用keep-alive依然會(huì)重新渲染iframe內(nèi)的內(nèi)容。而且iframe每一次渲染就相當(dāng)于打開一個(gè)新的網(wǎng)頁窗口,即使把節(jié)點(diǎn)保存下來,在渲染時(shí)iframe頁還是刷新的。

(3)緩存iframe實(shí)現(xiàn)方法

不使用 keep-alive ,因?yàn)関node原理不適用。直接把打開過得iframe中的dom保存下來。通過v-show顯示隱藏


image.png

image.png

iframeComponentsArray這個(gè)數(shù)組是打開過的iframe頁面數(shù)組

image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容