快捷導(dǎo)航

有關(guān)vue 組件切換,動(dòng)態(tài)組件,組件緩存

更新時(shí)間：2021年11月08日 09:50:59 作者：給我一個(gè)div

這篇文章主要介紹了有關(guān)vue 組件切換,動(dòng)態(tài)組件,組件緩存，在組件化開發(fā)模式下，我們會(huì)把整個(gè)項(xiàng)目拆分成很多組件，然后按照合理的方式組織起來,達(dá)到預(yù)期效果，下面來看看文章的詳細(xì)內(nèi)容

背景：

在組件化開發(fā)模式下，我們會(huì)把整個(gè)項(xiàng)目拆分成很多組件，然后按照合理的方式組織起來,達(dá)到預(yù)期效果

因?yàn)轫撁媸嵌嘟M件組織起來的,這時(shí)候自然就存在組件之間的切換問題，Vue中也提出了動(dòng)態(tài)組件的概念,使得我們可以更好的實(shí)現(xiàn)組件之間的切換效果 , 但是vue中組件的切換實(shí)際是組件本身重新創(chuàng)建和銷毀的過程,在某些場景下我們并不希望組件被重新創(chuàng)建重新渲染

實(shí)際場景: 用戶操作列表頁-->詳情頁-->列表頁此時(shí)需要達(dá)到的預(yù)期效果是用戶從詳情頁切換回列表頁的時(shí)候原來的頁面保持不變,而不是重新渲染,此時(shí)就需要在用戶從列表頁切換到詳情頁的時(shí)候?qū)υ瓉淼牧斜眄撨M(jìn)行緩存

本文主要介紹Vue中組件的切換以及緩存解決方法

一.組件的切換方式

方式一: 使用 v-if和v-else

// 變量flag為true時(shí)顯示comp-a組件 ,相反則顯示comp-b組件
<comp-a v-if="flag"></comp-a>

<comp-b v-else></comp-b>

方式二:使用內(nèi)置組件:<component></component>

// 點(diǎn)擊切換登錄,注冊(cè),退出組件
   <template>
     <div>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'login'">登錄</a>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'register'">注冊(cè)</a>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'logOut'">退出</a>
        
        //  <component></component> 來展示對(duì)應(yīng)名稱的組件,相當(dāng)于一個(gè)占位符
        //    :is 屬性指定 組件名稱

      <component :is="comName"></component>
      </div>
    </template>

方式三 : vue-router

// 路由規(guī)則:
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue')
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('../views/register.vue')
  },
  
  // 需要展示組件的位置:
   <router-view />

二.組件緩存: keep-alive

根據(jù)需求對(duì)組件緩存,而不是銷毀重建,正如本文開篇舉例的實(shí)際場景

1.keep-alive定義

<keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。

<keep-alive> 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。當(dāng)組件在 <keep-alive> 內(nèi)被切換，它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。

2.keep-alive的生命周期

activated

在 keep-alive 組件激活時(shí)調(diào)用該鉤子函數(shù)在服務(wù)器端渲染期間不被調(diào)用

deactivated

在 keep-alive 組件停用時(shí)調(diào)用該鉤子在服務(wù)器端渲染期間不被調(diào)用

被包含在 keep-alive 中創(chuàng)建的組件，會(huì)多出兩個(gè)生命周期的鉤子: activated 與 deactivated
使用 keep-alive 會(huì)將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁面的時(shí)候獲取最新的數(shù)據(jù)，需要在 activated 階段獲取數(shù)據(jù)，承擔(dān)原來 created 鉤子函數(shù)中獲取數(shù)據(jù)的任務(wù)。

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

設(shè)置了緩存的組件：

第一次進(jìn)入：beforeRouterEnter ->created->…->activated->…->deactivated> beforeRouteLeave
后續(xù)進(jìn)入時(shí)：beforeRouterEnter ->activated->deactivated> beforeRouteLeave

三.keep-alive使用方法

1.Props

include - 字符串或數(shù)組,正則表達(dá)式。只有名稱匹配的組件會(huì)被緩存-->include的值為組件的name。
exclude - 字符串或正則表達(dá)式。任何名稱匹配的組件都不會(huì)被緩存。
max - 數(shù)字。最多可以緩存多少組件。

2.搭配<component></component>使用

  <template>
     <div>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'login'">登錄</a>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'register'">注冊(cè)</a>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="comName = 'logOut'">退出</a>
     
     // login組件會(huì)被緩存 不設(shè)置include會(huì)默認(rèn)緩存所有掛載到<component></component>的組件
     // 緩存多個(gè)指定組件include = ['login','register']
      <keep-alive include="login">
          <component :is="comName"></component>
      </keep-alive>    
      </div>
    </template>

3.搭配<router-view />路由使用

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

 {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue')
    meta:{
        keepAlive : true   // login組件會(huì)被緩存
    }
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('../views/register.vue'),
      meta:{
        keepAlive : false   //  register組件不會(huì)被緩存
    }
  },

<router-view />:

<div id="app">
    <keep-alive> 
    <!-- 需要緩存的視圖組件 -->
        <router-view v-if="$route.meta.keepAlive"> </router-view>
    </keep-alive>
    
    <!-- 不需要緩存的視圖組件 --> 
    <router-view v-if="!$route.meta.keepAlive"> </router-view>
</div>

4.清除緩存組件

 // beforeRouteLeave()鉤子
// 判斷是否要到詳情頁
  beforeRouteLeave(to, from, next) {
      if (to.path === "/goods_detail") {
        from.meta.keepAlive = true;
      } else {
        from.meta.keepAlive = false;
        // this.$destroy()
      }
      next();
    }

到此這篇關(guān)于有關(guān)vue 組件切換,動(dòng)態(tài)組件,組件緩存的文章就介紹到這了,更多相關(guān)vue組件切換,動(dòng)態(tài)組件,組件緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: