Vue淺析講解動態(tài)組件與緩存組件及異步組件的使用

更新時間：2022年09月13日 09:35:04 作者：H5_ljy

這篇文章主要介紹了Vue開發(fā)中的動態(tài)組件與緩存組件及異步組件的使用教程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1.什么是動態(tài)組件

當我們希望頁面中的某個地方，在不同組件之間進行動態(tài)切換，這時候除了條件渲染，還可以使用動態(tài)組件。

2.如何實現(xiàn)動態(tài)組件渲染

vue提供了一個內(nèi)置的組件，專門用來實現(xiàn)動態(tài)組件的渲染：通過 is 屬性動態(tài)指定要渲染的組件

因為要渲染的組件是不確定的，所以要通過data申明一個變量用來接收組件的名稱，用 :is 動態(tài)綁定這個變量到組件中，通過按鈕添加事件改變變量的值來切換相應(yīng)組件

案例：

//父組件App中
<template>
  <div v-cloak class="App">
    <button v-for="(item, index) in arr" :key="index" @click="()=>msg=item">點擊切換box{{index+1}}組件</button>
    <component :is="msg"></component>
  </div>
</template>
<script>
  import box1 from "./components/box1.vue"
  import box2 from "./components/box2.vue"
  import box3 from "./components/box3.vue"
  export default {  
    data() {
      return {
        msg: 'box1',
        arr:['box1', 'box2', 'box3']
      }
    },
    components: {
      box1,
      box2,
      box3
    },
  }

//子組件box1中
<template>
        <div>
            <h1>box1組件中</h1>
        </div>
</template>
//子組件box2中
<template>
<div>
    <h1>box2組件中</h1>
</div>
</template>
//子組件box3中
<template>
    <div>
      <h1>box3組件中</h1>
    </div>
</template>

3.如何實現(xiàn)緩存組件

動態(tài)組件的切換，切換后是不會緩存之前被切換掉的組件的，每次切換新組件的時候，Vue 都創(chuàng)建了一個新的組件對象。

有時候我們希望在A組件時用戶做了一些操作，切換B組件時做了一些操作，當切回A組件時希望記住A的操作，不要重新創(chuàng)建A組件，keep-alive可以緩存動態(tài)切換的組件,代碼如下：

//默認全部組件緩存
<keep-alive>
     	<components :is="msg"></components>
 </keep-alive>

keep-alive提供了三種匹配組件的方法:

1.include 用來指定：只有名稱匹配的組件會被緩存。多個組件名之間使用英文的逗號分隔；可以寫組件名字符串也可以寫正則

<keep-alive :include="/box2|box3/">  //匹配bo2和box3組件緩存
        <component :is="msg"></component>
    </keep-alive>

2.exclude 只有名稱匹配的組件不會被緩存。多個組件名之間使用英文的逗號分隔；

    <keep-alive exclude="box2">
        <component :is="msg"></component>
    </keep-alive>

3.max 填數(shù)字，表示緩存最近被渲染過的幾個組件

    <keep-alive :max="2">
        <component :is="msg"></component>
    </keep-alive>

keep-alive對應(yīng)的生命周期函數(shù)：

當組件被緩存時，會自動觸發(fā)組件的 deactivated 生命周期函數(shù)。

當組件被激活時，會自動觸發(fā)組件的 activated 生命周期函數(shù)。

4.異步組件

vue開發(fā)過程中，我們會做出特別多特別多的組件，包括login,header,footer,main等等。這樣使整個網(wǎng)站看起來就十分的龐大，當我們在打開網(wǎng)頁的時候，突然一下子把這些所有的組件加載上來，這么多的請求全部同時開始請求，勢必會造成網(wǎng)頁打開很慢，使客戶得到的是非常差勁的體驗。

在單頁應(yīng)用（SPA）中，如果沒有用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時，需要加載的內(nèi)容過多，延時過長，不利于用戶體驗，而運用懶加載則可以將頁面進行劃分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時。

此時我們需要運用到異步加載并緩存組件

什么是異步加載并緩存組件？

1、異步加載組件：用不到的組件不會加載，因此網(wǎng)頁打開速度會很快，當你用到這個組件的時候，才會通過異步請求進行加載；

官方解釋：Vue允許將組件定義為一個異步解析（加載）組件定義的工廠函數(shù)，即Vue只在實際需要渲染組件時，才會觸發(fā)調(diào)用工廠函數(shù)，并且將結(jié)果緩存起來，用于將來再次渲染。

2、組件緩存起來：通過異步加載的組件會緩存起來，當你下一次再用到這個組件時，絲毫不會有任何的疑遲，組件很快會從緩存中加載出來。

如何使用：

方法一：通過webpack2.0的按需加載

//1 全局：
 Vue.component('component-name',function(resolve){
 //require 語法告訴 webpack自動將編譯后的代碼分割成不同的塊
 //這些塊將通過 Ajax 請求自動下載
   require(['./my-async-componnet'],resolve)
 })
 //注冊全局組件名，但只有一個名字，沒有實體，相當于空的
//當需要這個組件時，調(diào)用上面的工廠函數(shù)，觸發(fā)webpack的異步加載模塊方法
//然后異步請求一個模塊，請求成功后，這個模塊內(nèi)容即為組件實體部分，并對應(yīng)地方渲染，加載內(nèi)容也緩存下來。
//2 局部
 new Vue({
   components: {
        'component-name':function(resolve) {
           require(['./my-async-component'], resolve)
        }
   }
 })

方法二：通過webpack2+es2015返回一個promise(主流 )

//1 全局：
Vue.component('component-name',
 （）=> import('./my-async-componnet')//這個 `import` 函數(shù)會返回一個 `Promise` 對象,不要問我為什么,人家webpack這樣設(shè)計的。
 )
//2 局部：
 new Vue({
   components: {
       'component-name': () =>  import('./my-async-componnet')//這個 `import` 函數(shù)會返回一個 `Promise` 對象。
   }
 })

方法三：高級異步組件（可以處理加載狀態(tài)）

常常用在路由中使用，vue 2.3.0+ 新增終極解決方案,要求路由2.4.0+

//工廠對象可以返回一個如下對象，對象里面的一些配置參數(shù)
const AsyncComponent = () => ({
  // 需要加載的組件 (這個 `import` 函數(shù)會返回一個 `Promise` 對象。)
  component: import('./MyComponent.vue'),
  // 異步組件加載時使用的組件
  loading: LoadingComponent,
  // 加載失敗時使用的組件
  error: ErrorComponent,
  // 展示加載時組件的延時時間。默認值是 200 (毫秒)
  delay: 200,
  // 如果提供了超時時間且組件加載也超時了，
  // 則使用加載失敗時使用的組件。默認值是：`Infinity`
  timeout: 3000
})

到此這篇關(guān)于Vue淺析講解動態(tài)組件與緩存組件及異步組件的使用的文章就介紹到這了,更多相關(guān)Vue動態(tài)組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: