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