1. 程式人生 > >vue中keep-alive的一些特性

vue中keep-alive的一些特性

使用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 這兩個生命週期鉤子函式將會被對應執行,因此使用這兩個生命週期鉤子函式也可以處理此類問題。