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