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

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

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

就像這樣

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

簡(jiǎn)單講一下 keep-alive

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

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

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

props

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

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

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

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

重點(diǎn)來了~

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

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

我們通常會(huì)在路由表各個(gè)路由中 的 meta下 中 添加 是否緩存的標(biāo)志位，下意識(shí)的認(rèn)識(shí)是路由表的 name,其實(shí)不然

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

使用中可能遇到的問題

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

退出時(shí)觸發(fā)deactivated。當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā)activated。

注意：

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

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

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

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

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

然后我就掉進(jìn)坑里了，配置了一堆路由的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)封裝了兩個(gè)屬性，include和exclude表示那些組件需要緩存那些組件不需要緩存，用法大致如下：

<keep-alive include="test-keep-alive">
? <!-- 將緩存name為test-keep-alive的組件 -->
? <component></component>
</keep-alive>
<keep-alive include="a,b">
? <!-- 將緩存name為a或者b的組件，結(jié)合動(dòng)態(tài)組件使用 -->
? <component :is="view"></component>
</keep-alive>
<!-- 使用正則表達(dá)式，需使用v-bind -->
<keep-alive :include="/a|b/">
? <component :is="view"></component>
</keep-alive>
<!-- 動(dòng)態(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這兩個(gè)生命周期函數(shù)一定是要在使用了keep-alive組件后才會(huì)有的，否則則不存在

總結(jié)

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

最新評(píng)論