vue中 keep alive 元件的作用

在vue專案中,難免會有列表頁面或者搜尋結果列表頁面,點選某個結果之後,返回回來時,如果不對結果頁面進行快取,那麼返回列表頁面的時候會回到初始狀態,但是我們想要的結果是返回時這個頁面還是之前搜尋的結果列表,這時候就需要用到vue的keep-alive技術了.

keep-alive是 vue 內建的乙個元件，可以使被包含的元件保留狀態，或避免重新渲染。

用法也很簡單：

props

// 元件 a

export default 
}}

可以保留它的狀態或避免重新渲染

可以保留它的狀態或避免重新渲染

但實際專案中,需要配合vue-router共同使用.

router-view也是乙個元件，如果直接被包在keep-alive裡面，所有路徑匹配到的檢視元件都會被快取：

如果只想router-view裡面某個元件被快取，怎麼辦？

增加 router.meta 屬性

// routes 配置

export default [
}, }]

vue 動態元件 全域性元件 keepAlive

故心故心故心故心小故衝啊 全域性元件定義 元件快取 keep alive 動態模板 當在這些元件之間切換的時候，有時會想保持這些元件的狀態，以避免反覆重渲染導致的效能問題 1 通過條件匹配來顯示a元件 b元件 2 動態模板 vue中提供了乙個動態模板，可以在任意模板中切換，就是用vue中用 is來掛...

vue 之 keep alive快取元件

當在這些元件之間切換的時候，你有時會想保持這些元件的狀態，以避免反覆重渲染導致的效能問題。keep alive 可緩緩存元件，保留之前的元件，不會重新渲染元件 元件到 archive 標籤，然後再切換回 posts，是不會繼續展示你之前選擇的文章的。這是因為你每次切換新標籤的時候，vue 都建立了乙...

vue使用keep alive快取元件

在這裡keep alive配合了router view使用，keep alive本身是vue2.0的功能，並不是vue router的，所以在vue1.0版本是不支援的。在vue路由中使用meta配合實現效果 在router檔案加上meta判斷 import vue from vue import ...