vue中keep-alive的一些特性
阿新 • • 發佈:2019-01-28
使用keep-alive是為了快取一些沒有變化的元件,但是有的元件是需要隨時獲取新資料,而有的需要快取起來,那麼有兩種方法可以滿足這樣的需求:
1.使用include或者exclude
include - 字串或正則表示式。只有匹配的元件會被快取。
exclude - 字串或正則表示式。任何匹配的元件都不會被快取。
include 和 exclude 屬性允許元件有條件地快取。二者都可以用逗號分隔字串、正則表示式或一個數組來表示:
<!-- 元件名為a的元件不會被快取 -->
<keep-alive exclude="a">
<router-view />
</keep-alive>
<!-- 逗號分隔字串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正則表示式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 陣列 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
2.元件在keep-alive內被切換,它的 activated 和 deactivated 這兩個生命週期鉤子函式將會被對應執行,因此使用這兩個生命週期鉤子函式也可以處理此類問題。