vue2 0 keep alive最佳實踐

1.基本用法

vue2.0提供了乙個keep-alive元件用來快取元件,避免多次載入相應的元件,減少效能消耗

有時候 可能需要快取整個站點的所有頁面,而頁面一般一進去都要觸發請求的

在使用keep-alive的情況下

將首次觸發請求寫在created鉤子函式中,就能實現快取,

比如列表頁,去了詳情頁 回來,還是在原來的頁面

2.快取部分頁面或者元件

(1)使用router.mate屬性

//

這是目前用的比較多的方式
if="!$route.meta.notkeepalive">
if="$route.meta.notkeepalive">
router設定
... 
routes: [
},} ]}
....
//表示index和test2都使用keep-alive

(2).使用新增屬性inlcude/exclude

2.1.0後提供了include/exclude兩個屬性 可以針對性快取相應的元件

//其中a,b是元件的name

注意:這種方法都是預先知道元件的名稱的

(2)動態判斷

vue2 0 keep alive最佳實踐

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

vue2 0 keep alive最佳實踐

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

vue2 0 keep alive元件用法

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