使用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顯示隱藏
iframeComponentsArray這個(gè)數(shù)組是打開過的iframe頁面數(shù)組