使用keep-alive無效以及include和exclude用法

最近在修改我司一款醫(yī)療類CMS系統(tǒng)，采用的技術棧是 Vue2.x + Ant-Design-Vue ，用戶提到了一個需求，希望在切換Tabs多頁簽時，能夠在其他Tabs切換回來后，下方的分頁器頁碼依然可以留在離開前的頁數(shù)。

這里想到的是 使用 Vue中的 keep-alive，去包裹住 router-view，從而實現(xiàn)路由的緩存

就像這樣

<template>
  <div class="app-main">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

簡單講一下 keep-alive

keep-alive 是 Vue 提供給開發(fā)者的一個全局組件，被包裹住的組件，可以保留初始的狀態(tài)，避免被重新渲染。（通常和 router-view 配合使用 ）

開發(fā)者可以根據(jù)自己的需要，對想要或者不想要緩存的特定頁面，進行緩存。如何實現(xiàn)呢？

上面說到了，keep-alive是組件，所以接收的是props，接受一個 include 和 exclude，

props

• include：字符串或正則表達，只有匹配的組件會被緩存
• exclude：字符串或正則表達式，任何匹配的組件都不會被緩存

不少初次上手keep-alive的，會發(fā)現(xiàn)被包裹的組件依然沒有被緩存，為什莫會這樣？

帶著這份疑惑，我們看一下 官方大大怎么說的

匹配首先檢查組件自身的 name 選項，若是 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components選項的鍵值)。匿名組件不能被匹配。

重點來了~

這里的 name 不是 路由表中 meta 下的name，是局部組件中 export default 下的name

<script>
export default {
  name: 'AppMain',
}
</script>

我們通常會在路由表各個路由中 的 meta下 中 添加 是否緩存的標志位，下意識的認識是路由表的 name,其實不然

{
   path: '/a',
   name: 'a',
   component: () => import('src/views/a'),
   meta: { keepAlive: true }
},
{
   path: '/b',
   name: 'a',
   component: () => import('src/views/b'),
   meta: { keepAlive: true }
}

使用中可能遇到的問題

當引入keep-alive 的時候，頁面第一次進入，鉤子的觸發(fā)順序created> mounted> activated

退出時觸發(fā)deactivated。當再次進入（前進或者后退）時，只觸發(fā)activated。

注意：

我們知道 keep-alive之后頁面模板第一次初始化解析變成HTML片段后，再次進入就不在重新解析而是讀取內(nèi)存中的數(shù)據(jù)，即，只有當數(shù)據(jù)變化時，才使用VirtualDOM進行diff更新。

有需要的話，頁面進入的數(shù)據(jù)獲取應該在activated中也放一份。數(shù)據(jù)下載完畢手動操作DOM的部分也應該在activated中執(zhí)行才會生效。

所以，有需要的話，應該activated中留一份數(shù)據(jù)獲取的代碼，或者不要created部分，直接將created中的代碼轉(zhuǎn)移到activated中。

keep-alive include和exclude無效問題及踩坑

• include：使該標簽作用于所有name屬性的值跟此標簽 include的屬性值一致的vue頁面
• exclude：使該標簽不作用于所有name屬性的值跟此標簽 exclude的屬性值一致的vue頁面

然后我就掉進坑里了，配置了一堆路由的name?。。。。o效?。?！

使用include/exclude 屬性需要給所有vue類的name賦值（注意不是給route的name賦值），否則 include/exclude不生效

正確寫法是

export default {
?name:'a', // include 或 exclude所使用的name
?data () {
?return{
? ? }
? },
}

路由

? ?// 保持 name為a和b的組件
? ?<keep-alive include="a,b">
? ? ? ? <router-view/>
? ?</keep-alive>

vue2.0版本后，keep-alive內(nèi)置組件已經(jīng)封裝了兩個屬性，include和exclude表示那些組件需要緩存那些組件不需要緩存，用法大致如下：

<keep-alive include="test-keep-alive">
? <!-- 將緩存name為test-keep-alive的組件 -->
? <component></component>
</keep-alive>
<keep-alive include="a,b">
? <!-- 將緩存name為a或者b的組件，結合動態(tài)組件使用 -->
? <component :is="view"></component>
</keep-alive>
<!-- 使用正則表達式，需使用v-bind -->
<keep-alive :include="/a|b/">
? <component :is="view"></component>
</keep-alive>
<!-- 動態(tài)判斷 -->
<keep-alive :include="includedComponents">
? <router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
? <!-- 將不緩存name為test-keep-alive的組件 -->
? <component></component>
</keep-alive>

另外：

activated,deactivated這兩個生命周期函數(shù)一定是要在使用了keep-alive組件后才會有的，否則則不存在

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論