Vue中的keep-alive如何使用

本篇內(nèi)容介紹了“Vue中的keep-alive如何使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

keep-alive 是 Vue 的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。例如：在開(kāi)發(fā)中經(jīng)常有從列表跳到詳情頁(yè)，然后返回詳情頁(yè)的時(shí)候需要緩存列表頁(yè)的狀態(tài)（比如滾動(dòng)位置信息），這個(gè)時(shí)候就需要保存狀態(tài)，要緩存狀態(tài)。在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM，減少加載時(shí)間及性能消耗，提高用戶體驗(yàn)性。使用方式為

<keep-alive>
    <component />
</keep-alive>

這里的component會(huì)被緩存。

1、概念：

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

2、作用：

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

3、使用方式:

方式一：在App.vue中使用keep-alive標(biāo)簽，表示緩存所有頁(yè)面

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

方式二：按條件緩存，使用include，exclude判斷是否緩存

// 1. 將緩存 name 為 cc 的組件,如果有多個(gè)，可用逗號(hào)分
  	<keep-alive include='cc'>
      <router-view/>
    </keep-alive>
// 2. 將不緩存 name 為 cc 的組件
	<keep-alive exclude='cc'>
  	  <router-view/>
	</keep-alive>
// 3. 還可使用屬性綁定動(dòng)態(tài)判斷
	<keep-alive :include='includedComs'>
  	  <router-view/>
	</keep-alive>

方式三：在router目錄下的index.js中，

第一步：使用meta:{keepAlive = true },表示需要緩存

 const routes = [
  {
    path:'/',
    component:Home,
    meta:{
        keepalive:true
    }
  },
  {
    path:'/login',
    component:Login
  },
   {
      path:'/edit',
      component:Edit,
      meta:{
          istoken: true
      }
   },
  {
      path:'/home',
      component:Home,
      meta:{
          keepalive:true
      }
  }
]

第二步：在App.vue中進(jìn)行判斷

<div id="app">
    <!--keep-alive 表示頁(yè)面不會(huì)被銷毀，即保持頁(yè)面狀態(tài)-->
    <keep-alive>
      <router-view v-if="$route.meta.keepalive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepalive"></router-view>
  </div>

“Vue中的keep-alive如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！