在搭建 vue 項(xiàng)目時(shí)，有某些組件沒必要多次渲染，所以需要將組件在內(nèi)存中進(jìn)行‘持久化'，此時(shí) 便可以派上用場(chǎng)了。 可以使被包含的組件狀態(tài)維持不變，即便是組件切換了，其內(nèi)的狀態(tài)依舊維持在內(nèi)存之中。在下一次顯示時(shí)，也不會(huì)重現(xiàn)渲染。

從事四川綿陽(yáng)服務(wù)器托管，服務(wù)器租用，云主機(jī)，雅安服務(wù)器托管，申請(qǐng)域名，CDN，網(wǎng)絡(luò)代維等服務(wù)。

PS： 與 相似，只是一個(gè)抽象組件，它不會(huì)在DOM樹中渲染(真實(shí)或者虛擬都不會(huì))，也不在父組件鏈中存在，比如：你永遠(yuǎn)在 this.$parent 中找不到 keep-alive 。

1. keep-alive的基礎(chǔ)使用

最基礎(chǔ)的一般是結(jié)合動(dòng)態(tài)組件去使用：

  


new Vue({
  el: '#app',
  data(){
    return {
      currentView: Test //Test為引入的子組件
    }
  }
})

不過此種方式并無太大的實(shí)用意義。

2. 生命周期鉤子

被包含在 中創(chuàng)建的組件，會(huì)多出兩個(gè)生命周期的鉤子: activated 與 deactivated

activated

在組件被激活時(shí)調(diào)用，在組件第一次渲染時(shí)也會(huì)被調(diào)用，之后每次keep-alive激活時(shí)被調(diào)用。

deactivated

在組件被停用時(shí)調(diào)用。

注意：只有組件被 keep-alive 包裹時(shí)，這兩個(gè)生命周期才會(huì)被調(diào)用，如果作為正常組件使用，是不會(huì)被調(diào)用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，這兩個(gè)鉤子依然不會(huì)被調(diào)用！另外在服務(wù)端渲染時(shí)此鉤子也不會(huì)被調(diào)用的。

3. 配合router-view使用

有些時(shí)候可能需要將整個(gè)路由頁(yè)面一切緩存下來，也就是將 進(jìn)行緩存。這種使用場(chǎng)景還是蠻多的。

在vue 2.1.0 之前，大部分是這樣實(shí)現(xiàn)的：

  



//router配置
new Router({
  routes: [
    {
      name: 'a',
      path: '/a',
      component: A,
      meta: {
        keepAlive: true
      }
    },
    {
      name: 'b',
      path: '/b',
      component: B
    }
  ]
})

這樣配置路由的路由元信息之后，a路由的 $router.meta.keepAlive 便為 true ，而b路由則為 false 。
所以為 true 的將被包裹在 keep-alive 中，為 false 的則在外層。這樣a路由便達(dá)到了被緩存的效果，如果還有想要緩存的路由，只需要在路由元中加入 keepAlive: true 即可。

4. 在2.1.0版本之后

在vue 2.1.0 版本之后，keep-alive 新加入了兩個(gè)屬性: include(包含的組件緩存生效) 與 exclude(排除的組件不緩存，優(yōu)先級(jí)大于include) 。

include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號(hào)分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來表示。
當(dāng)使用正則或者是數(shù)組時(shí)，一定要使用 v-bind !

有了include之后，再與 router-view 一起使用時(shí)便方便許多了:

5. 需要注意的地方

• 先匹配被包含組件的 name 字段，如果 name 不可用，則匹配當(dāng)前組件 componetns 配置中的注冊(cè)名稱。
• 不會(huì)在函數(shù)式組件中正常工作，因?yàn)樗鼈儧]有緩存實(shí)例。
• 當(dāng)匹配條件同時(shí)在 include 與 exclude 存在時(shí)，以 exclude 優(yōu)先級(jí)最高(當(dāng)前vue 2.4.2 version)。比如：包含于排除同時(shí)匹配到了組件A，那組件A不會(huì)被緩存。
• 包含在 中，但符合 exclude ，不會(huì)調(diào)用activated 和 deactivated。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。