詳解keep-alive組件緩存
keep-alive組件緩存
從a跳b，a已經(jīng)銷毀，b重新渲染；b跳a，b銷毀a重新渲染
源組件銷毀，目標(biāo)組件渲染
組件緩存：組件實(shí)例等相關(guān)（ 包括vnode）存儲(chǔ)起來(lái)
重新渲染指的是：把視圖重新編譯成新的vnode->dom diff->渲染成真實(shí)dom
真實(shí)dom被我移除了只是從頁(yè)面上移除，只是把vnode重新渲染成真實(shí)dom或者說(shuō)把真實(shí)dom插入到頁(yè)面中。所有周期都不會(huì)觸發(fā)（react中需要自己寫）
提一下vuex的區(qū)別：
第一次進(jìn)分類頁(yè)，數(shù)據(jù)都存到vuex中，只需要從vuex中拿到信息；跟keep-alive不一樣數(shù)據(jù)存到vuex中但組件依然銷毀，重新編譯視圖重新創(chuàng)建vnode重新渲染，只是不再發(fā)請(qǐng)求，但是解決不了視圖重新編譯。
聯(lián)帶數(shù)據(jù) 組件實(shí)例 vnode所有一切都緩存起來(lái)了；只是讓dom重新插入頁(yè)面
配置項(xiàng)：include表示做緩存的頁(yè)面
include要是動(dòng)態(tài)管理的
beforeEach/afterEach：全局的路由鉤子
動(dòng)態(tài)管理緩存組件：
keepAliveList數(shù)據(jù)中添加/移除keep-alive這里更新一下
所以next需要等待渲染完再next（移除時(shí)不需要）
緩存：第二次渲染速度是最快的，某些數(shù)據(jù)不會(huì)及時(shí)更新
到此這篇關(guān)于keep-alive組件緩存的文章就介紹到這了,更多相關(guān)keep-alive組件緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中el-table組件重復(fù)渲染的問(wèn)題以及解決
這篇文章主要介紹了Vue3中el-table組件重復(fù)渲染的問(wèn)題以及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
在使用?Vue?3?和?Vue?Router?4?開(kāi)發(fā)中大型?SPA?應(yīng)用時(shí),我們經(jīng)常會(huì)遇到需要?jiǎng)討B(tài)添加或刪除路由的場(chǎng)景,下面小編來(lái)和大家講講Vue?Router4如何正確重置路由吧2025-05-05
這篇文章主要介紹了Vue自定義指令，文章從背景開(kāi)始詳細(xì)介紹Vue自定義指令的詳細(xì)內(nèi)容，隨著Vue自定義指令的相關(guān)資料展開(kāi)具體內(nèi)容,需要的朋友可以參考一下2021-11-11
watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,當(dāng)某一個(gè)依賴型數(shù)據(jù)發(fā)生變化的時(shí)候,所有依賴這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化,即自動(dòng)調(diào)用相關(guān)的函數(shù),來(lái)實(shí)現(xiàn)數(shù)據(jù)的變動(dòng)，這篇文章簡(jiǎn)單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧2023-02-02
vue3中WatchEffect高級(jí)偵聽(tīng)器的實(shí)現(xiàn)
本文主要介紹了vue3中WatchEffect高級(jí)偵聽(tīng)器的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
vue實(shí)現(xiàn)廣告欄上下滾動(dòng)效果
這篇文章主要介紹了vue實(shí)現(xiàn)廣告欄上下滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
vue中的data,computed,methods,created,mounted用法及說(shuō)明
這篇文章主要介紹了vue中的data,computed,methods,created,mounted用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3+Vant打包報(bào)錯(cuò) Identifier ‘bem‘ has alrea
在實(shí)際項(xiàng)目開(kāi)發(fā)中,前端構(gòu)建的坑經(jīng)常出現(xiàn)在一些意想不到的地方,這次就出現(xiàn)了Vue3+Vant打包時(shí)報(bào)錯(cuò)Identifier ‘bem‘ has already been declared,下面我們就來(lái)看看具體解決方法吧2025-09-09
Vue如何實(shí)現(xiàn)打包資源按時(shí)間戳方式
這篇文章主要介紹了Vue如何實(shí)現(xiàn)打包資源按時(shí)間戳方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
vue選項(xiàng)卡Tabs組件實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue選項(xiàng)卡Tabs組件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11