vue2 0 keep alive最佳實踐

1.基本用法

vue2.0提供了乙個keep-alive元件
用來快取元件,避免多次載入相應的元件,減少效能消耗
component>
keep-alive>
有時候 可能需要快取整個站點的所有頁面,而頁面一般一進去都要觸發請求的
在使用keep-alive的情況下
router-view>
keep-alive>
將首次觸發請求寫在created鉤子函式中,就能實現快取,
比如列表頁,去了詳情頁 回來,還是在原來的頁面
2.快取部分頁面或者元件
(1)使用router. meta屬性
// 這是目前用的比較多的方式
v-if="!$route.meta.notkeepalive">
router-view>
keep-alive>
v-if="$route.meta.notkeepalive">
router-view>
router設定
... 
routes: [
},} ]}
....
// 表示index和test2都使用keep-alive
(2).使用新增屬性inlcude/exclude
2.1.0後提供了include/exclude兩個屬性 可以針對性快取相應的元件
include="a,b">
:is="view">
component>
keep-alive>
:include="/a|b/">
:is="view">
component>
keep-alive>
//其中a,b是元件的name
注意:這種方法都是預先知道元件的名稱的
(2)動態判斷
:include="includedcomponents">
router-view>
keep-alive>
includedcomponents動態設定即可

vue2 0 keep alive最佳實踐

1.基本用法 vue2.0提供了乙個keep alive元件 用來快取元件,避免多次載入相應的元件,減少效能消耗 component keep alive 有時候 可能需要快取整個站點的所有頁面,而頁面一般一進去都要觸發請求的 在使用keep alive的情況下 將首次觸發請求寫在created鉤子...

vue2 0 keep alive元件用法

在做vue移動端專案的時候，有些課程列表內容特別多，通過做上拉載入就可以分批載入，但是如果使用者操作到四五頁左右點進去看課程詳情，返回會回到第一頁資料。這樣再次上拉載入找課程就比較麻煩。所有我們可以利用vue2.0提供了乙個keep alive元件用來快取元件,避免多次載入相應的元件,減少效能消耗。...

vue2 0 keep alive最佳實踐

1.基本用法 vue2.0提供了乙個keep alive元件用來快取元件,避免多次載入相應的元件,減少效能消耗 有時候 可能需要快取整個站點的所有頁面,而頁面一般一進去都要觸發請求的 在使用keep alive的情況下 將首次觸發請求寫在created鉤子函式中,就能實現快取,比如列表頁,去了詳情頁...