有關vue 組件切換,動態(tài)組件,組件緩存

更新時間：2021年11月08日 09:50:59 作者：給我一個div

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

背景：

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

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

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

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

一.組件的切換方式

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

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

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

方式二:使用內(nèi)置組件:<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'">注冊</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> 來展示對應名稱的組件,相當于一個占位符
        //    :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ù)需求對組件緩存,而不是銷毀重建,正如本文開篇舉例的實際場景

1.keep-alive定義

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

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

2.keep-alive的生命周期

activated

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

deactivated

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

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

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

設置了緩存的組件：

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

三.keep-alive使用方法

1.Props

include - 字符串或數(shù)組,正則表達式。只有名稱匹配的組件會被緩存-->include的值為組件的name。
exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
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'">注冊</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組件會被緩存 不設置include會默認緩存所有掛載到<component></component>的組件
     // 緩存多個指定組件include = ['login','register']
      <keep-alive include="login">
          <component :is="comName"></component>
      </keep-alive>    
      </div>
    </template>

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

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

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

<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();
    }

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

您可能感興趣的文章: