vue中keepAlive組件的作用和使用方法詳解

Posted on by

前言

在面試的時候，很多面試官再問vue的時候可能就會提一嘴，你知道keep-alive有什麼作用嗎？

keep-alive是vue內置的一個組件，而這個組件的作用就是能夠緩存不活動的組件，我們能夠知道，一般情況下，組件進行切換的時候，默認會進行銷毀，如果有需求，某個組件切換後不進行銷毀，而是保存之前的狀態，那麼就可以利用keep-alive來實現

<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。

我這裡利用腳手架創建項目後會生成home和about兩個組件，並且通過路由進行切換

home組件

<template>
  <div class="home">
    <input type="text">
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>

我在home組件中寫瞭一個input輸入框

about組件

<template>
  <div class="about">
    <input type="text">
  </div>
</template>
<script>
export default {
  name:"about"
}
</script>

同樣的about組件也放瞭一個輸入框

當我們在home組件的輸入框輸入一些內容的時候，然後切換到about組件，在切換回home組件，我們會發現之前輸入的內容被清空瞭，其實也容易理解，就是當切換到about組建的時候，home組件就被銷毀瞭，輸入框的值自然被清空瞭

我在home組件寫瞭destroyed生命周期函數

當切換到about組件的時候home組件的destroyed就觸發瞭，所以home組件被銷毀瞭

那麼此時我們就可以利用keep-alive組件進行包裹router-view組件，將不活動的組件緩存起來

App組件

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <keep-alive>
      <router-view />
    </keep-alive>
    
  </div>
</template>

寫完之後會發現當切換到about組件時，home組件中的destroyed並沒有觸發,並且home組件的值也保存瞭下來

但是這樣也肯定不好，我們會發現，about組件的值也被緩存瞭，就是所有的路由組件都被緩存瞭，嚴重浪費性能，而且也不符合需求，我們現在隻想緩存home組件

在keep-alive上有兩個屬性

字符串或正則表達式。隻有匹配的組件會被緩存。

  • include 值為字符串或者正則表達式匹配的組件name會被緩存。
  • exclude 值為字符串或正則表達式匹配的組件name不會被緩存。

首先利用include實現，匹配到組件中定義的name，將進行緩存

<keep-alive include="home">
   <router-view />
</keep-alive>

我們會發現home已經被緩存瞭，但是about沒有被緩存

而exclude就是排除瞭，這個就不在演示瞭，很簡單，除瞭這個我們還可以利用路由中的meta屬性來控制

{
      path: '/',
      name: 'home',
      meta:{
        keepAlive:true
      },
      component: Home
    }

將home的路由規則鐘的meta添加keepAlive屬性為true，也就是當前路由組件要進行緩存

keep-alive代碼可以結合v-if進行包裹，如果meta中的keepAlive為true進行緩存，否側不進行緩存，這樣可以更靈活一些

<keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

這樣組件的緩存是實現瞭，但是還是會有一些問題，就是因為組件被緩存，並沒有被銷毀，所以組件在切換的時候也就不會被重新創建，自然也就不會調用created等生命周期函數，所以此時要使用activated與deactivated來獲取當前組件是否處於活動狀態

我在home組件裡面寫入瞭activated與deactivated生命周期函數

activated(){
    console.log("哎呀看見我瞭")
    console.log("----------activated--------")
  },
  deactivated(){
    console.log("討厭！！你又走瞭")
    console.log("----------deactivated--------")
  }

通過上面的gif圖相信已經看得很清楚瞭，此時keep-Alive也就差不多瞭

總結

到此這篇關於vue中keepAlive組件作用和使用方法的文章就介紹到這瞭,更多相關vue中keepAlive組件使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：