快捷導(dǎo)航

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

更新時(shí)間：2021年07月30日 12:37:56 作者：搬磚猴哥

vue里提供了keep-alive組件用來緩存狀態(tài),這篇文章主要給大家介紹了關(guān)于vue中keepAlive組件的作用和使用方法的相關(guān)資料,需要的朋友可以參考下

前言

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

keep-alive是vue內(nèi)置的一個(gè)組件，而這個(gè)組件的作用就是能夠緩存不活動(dòng)的組件，我們能夠知道，一般情況下，組件進(jìn)行切換的時(shí)候，默認(rèn)會(huì)進(jìn)行銷毀，如果有需求，某個(gè)組件切換后不進(jìn)行銷毀，而是保存之前的狀態(tài)，那么就可以利用keep-alive來實(shí)現(xiàn)

<keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。

<keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。

我這里利用腳手架創(chuàng)建項(xiàng)目后會(huì)生成home和about兩個(gè)組件，并且通過路由進(jìn)行切換

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組件中寫了一個(gè)input輸入框

about組件

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

同樣的about組件也放了一個(gè)輸入框

當(dāng)我們?cè)趆ome組件的輸入框輸入一些內(nèi)容的時(shí)候，然后切換到about組件，在切換回home組件，我們會(huì)發(fā)現(xiàn)之前輸入的內(nèi)容被清空了，其實(shí)也容易理解，就是當(dāng)切換到about組建的時(shí)候，home組件就被銷毀了，輸入框的值自然被清空了

我在home組件寫了destroyed生命周期函數(shù)

當(dāng)切換到about組件的時(shí)候home組件的destroyed就觸發(fā)了，所以home組件被銷毀了

那么此時(shí)我們就可以利用keep-alive組件進(jìn)行包裹router-view組件，將不活動(dòng)的組件緩存起來

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>

寫完之后會(huì)發(fā)現(xiàn)當(dāng)切換到about組件時(shí)，home組件中的destroyed并沒有觸發(fā),并且home組件的值也保存了下來

但是這樣也肯定不好，我們會(huì)發(fā)現(xiàn)，about組件的值也被緩存了，就是所有的路由組件都被緩存了，嚴(yán)重浪費(fèi)性能，而且也不符合需求，我們現(xiàn)在只想緩存home組件

在keep-alive上有兩個(gè)屬性

字符串或正則表達(dá)式。只有匹配的組件會(huì)被緩存。

include 值為字符串或者正則表達(dá)式匹配的組件name會(huì)被緩存。
exclude 值為字符串或正則表達(dá)式匹配的組件name不會(huì)被緩存。

首先利用include實(shí)現(xiàn)，匹配到組件中定義的name，將進(jìn)行緩存

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

我們會(huì)發(fā)現(xiàn)home已經(jīng)被緩存了，但是about沒有被緩存

而exclude就是排除了，這個(gè)就不在演示了，很簡(jiǎn)單，除了這個(gè)我們還可以利用路由中的meta屬性來控制

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

將home的路由規(guī)則鐘的meta添加keepAlive屬性為true，也就是當(dāng)前路由組件要進(jìn)行緩存

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

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

這樣組件的緩存是實(shí)現(xiàn)了，但是還是會(huì)有一些問題，就是因?yàn)榻M件被緩存，并沒有被銷毀，所以組件在切換的時(shí)候也就不會(huì)被重新創(chuàng)建，自然也就不會(huì)調(diào)用created等生命周期函數(shù)，所以此時(shí)要使用activated與deactivated來獲取當(dāng)前組件是否處于活動(dòng)狀態(tài)

我在home組件里面寫入了activated與deactivated生命周期函數(shù)

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