溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“vue中有沒有緩存機制”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue中有沒有緩存機制”文章吧。
vue中有緩存機制，可以利用“keep-alive”把切換出去的組件保留在內存中，保留該組件的狀態或避免重新渲染，實現頁面緩存；“keep-alive”是一個vue內置的抽象組件，用于緩存組件，避免多次加載相同的組件，減少性能消耗。
本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。
緩存，不管是PC 端還是移動端，不可避免的問題。vue中有一個keepAlive,這個api 基本 能實現我們開發的一些需要。
簡單介紹下keep-alive:
1、把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染，實現頁面緩存；
2、<keep-alive>是抽象組件，它自身不會渲染DOM元素，也不會出現在父組件鏈中。
3、當組件在<keep-alive>內被切換，它的actived 和 deactived 這兩個生命周期鉤子函數將會被對應執行。（這個基本沒什么）
注：在2.2.0及其更高版本中，activated 和 deactivated 將會在<keep-alive>樹內的所有嵌套組件中觸發。
keep-alive是Vue的內置組件，當它包裹動態組件時，會緩存不活動的組件實例，而不是銷毀。
作用：
用來緩存組件，避免多次加載相同的組件，減少性能消耗，提高用戶體驗。
使用方式舉例:
在App.vue中使用keep-alive標簽，表示緩存所有頁面
<div id="app"> <keep-alive> <tar-bar></tar-bar> <div class="container"> <left-menu></left-menu> <Main /> </div> </keep-alive> </div>
部分頁面緩存
注意：其中transition 直接包在這兩個外面 會報錯；直接用transition-group也會報錯，需要用兩個transition。
以上就是關于“vue中有沒有緩存機制”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
