Vue中keep-alive的作用是什么及怎么使用

這篇文章主要介紹“Vue中keep-alive的作用是什么及怎么使用”，在日常操作中，相信很多人在Vue中keep-alive的作用是什么及怎么使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue中keep-alive的作用是什么及怎么使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

一、概念：

keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，該組件將不會(huì)銷(xiāo)毀。

二、作用：

用來(lái)緩存組件，避免多次加載相同的組件，減少性能消耗，提高用戶(hù)體驗(yàn)。

三、屬性

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

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

四、使用場(chǎng)景

比如：有一個(gè)列表頁(yè)面和一個(gè)詳情頁(yè)面，那么用戶(hù)可能會(huì)經(jīng)常執(zhí)行打開(kāi)詳情 => 返回列表 => 打開(kāi)詳情，那么就可以對(duì)列表組件使用進(jìn)行緩存，這樣用戶(hù)每次返回列表的時(shí)候，都能從緩存中快速渲染，而不是重新渲染頁(yè)面，從而節(jié)省內(nèi)存開(kāi)銷(xiāo)。

五、使用方式:

5.1. 在App.vue中使用keep-alive組件，來(lái)緩存所有頁(yè)面

  <div id="app">
  	<keep-alive>
	    <header-bar></header-bar>
	    <div class="container">
	      <menu></menu>
	      <Main />
	    </div>
	    <footer-bar></footer-bar>
    </keep-alive>
  </div>

5.2. 按條件緩存，使用include，exclude判斷是否緩存

5.2.1. 將緩存 name 為 keep的組件，如果有多個(gè)，可用逗號(hào)分

<keep-alive include='keep'>
  <router-view/>
</keep-alive>

5.2.2. 將不緩存 name 為 nokeep的組件

<keep-alive exclude='nokeep'>
  <router-view/>
</keep-alive>

5.2.3. 還可使用屬性綁定動(dòng)態(tài)判斷

<keep-alive :include='includedFun'>
  <router-view/>
</keep-alive>

5.3. 在router目錄下的index.js中，

5.3.1. 使用meta: { keepAlive = true }, 表示需要緩存

 const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path:'/ login',
    component: Login
  },
   {
      path: '/list',
      component: List,
      meta: {
          isKeep: true
      }
   },
  {
      path: '/detail',
      component: Detail,
      meta:{
          isKeep: true
      }
  }
]

5.3.2. 在App.vue中進(jìn)行判斷

<div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.isKeep"></router-view>
    </keep-alive>
    <router-view></router-view>
  </div>

到此，關(guān)于“Vue中keep-alive的作用是什么及怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！