keep-alive 的作用及使用場景


keep-alive:主要用於保留組件狀態避免重新渲染

比如: 有一個列表頁面和一個 詳情頁面,那么用戶就會經常執行打開詳情=>返回列表=>打開詳情這樣的話 列表 和 詳情 都是一個頻率很高的頁面,那么就可以對列表組件使用<keep-alive></keep-alive>進行緩存,這樣用戶每次返回列表的時候,都能從緩存中快速渲染,而不是重新渲染

1、屬性:

  • include:字符串或正則表達式。只有匹配的組件會被緩存。

  • exclude:字符串或正則表達式。任何匹配的組件都不會被緩存。

2、用法:

包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們。和 <transition>相似,<keep-alive>是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出現在父組件鏈中。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM