詳解keep-alive組件緩存
keep-alive組件緩存
從a跳b，a已經(jīng)銷(xiāo)毀，b重新渲染；b跳a，b銷(xiāo)毀a重新渲染
源組件銷(xiāo)毀，目標(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中需要自己寫(xiě)）
提一下vuex的區(qū)別：
第一次進(jìn)分類(lèi)頁(yè)，數(shù)據(jù)都存到vuex中，只需要從vuex中拿到信息；跟keep-alive不一樣數(shù)據(jù)存到vuex中但組件依然銷(xiāo)毀，重新編譯視圖重新創(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)文章
本文主要介紹了vite2.0 踩坑，記錄了一些在配置項(xiàng)目中遇到的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了vue如何封裝選擇文件組件和選擇文件api問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多條件和模糊搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
Vue 3.0 前瞻Vue Function API新特性體驗(yàn)
這篇文章主要介紹了Vue 3.0 前瞻Vue Function API新特性體驗(yàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
springboot + vue+elementUI實(shí)現(xiàn)圖片上傳功能
文章描述了如何使用Element UI的el-upload組件實(shí)現(xiàn)前端圖片上傳,并將圖片存儲(chǔ)到后端數(shù)據(jù)庫(kù),同時(shí)在頁(yè)面上回顯上傳的圖片,后端通過(guò)接口接收?qǐng)D片,并將其存儲(chǔ)在指定位置,然后返回圖片路徑以便在前端顯示,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
vue內(nèi)點(diǎn)擊url下載文件的最佳解決方案分享
這篇文章主要給大家介紹了關(guān)于vue內(nèi)點(diǎn)擊url下載文件的最佳解決方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
Vue中$nextTick實(shí)現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue中$nextTick實(shí)現(xiàn)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
使用axios請(qǐng)求時(shí),發(fā)送formData請(qǐng)求的示例
今天小編就為大家分享一篇使用axios請(qǐng)求時(shí),發(fā)送formData請(qǐng)求的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要為大家介紹了Vue組件之間的數(shù)據(jù)共享，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
Vue項(xiàng)目中使用jsonp抓取跨域數(shù)據(jù)的方法
這篇文章主要介紹了Vue項(xiàng)目中使用jsonp抓取跨域數(shù)據(jù)的方法，本文通過(guò)實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下2019-11-11