Vue動態(tài)組件和異步組件是什么

小編給大家分享一下Vue動態(tài)組件和異步組件是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、下陸網(wǎng)站維護(hù)、網(wǎng)站推廣。

動態(tài)組件

如果我們打算在一個(gè)地方根據(jù)不同的狀態(tài)引用不同的組件的話，比如tab頁，那么Vue給我們提供動態(tài)組件。

基本使用

Parent.vue

<template>
<div>
    <el-button-group>
        <el-button v-for='(btn, index) in btnGroup' 
                   :key="index" :class="{active:btn.disabled}"  
                   @click='change(index)'>{{btn.name}}
        </el-button>
    </el-button-group>
    <div>
        <component :is='currentCom'></component>
    </div>
</div>
</template>
<script>
import Childs1 from './Childs1'
import Childs2 from './Childs2'
import Childs3 from './Childs3'
import Childs4 from './Childs4'

export default {
    name:'Parent',
    components:{
        Childs1,
        Childs2,
        Childs3,
        Childs4
    },
   data() {
    return {
        btnGroup: [
            {name: 'Childs1', disabled: true},
            {name: 'Childs2', disabled: false},
            {name: 'Childs3', disabled: false},
            {name: 'Childs4', disabled: false},
        ],
        currentCom:'Childs1'
        
    }
  },
  methods:  {
      change(index){

          let pre = Number(this.currentCom[this.currentCom.length -1]);
          this.btnGroup[pre -1].disabled = false;
          this.btnGroup[index].disabled = true;
          this.currentCom = 'Childs' + (index + 1);
          
      }
  }
}
</script>
<style scoped>
.active{
    background-color: red;
}
</style>

運(yùn)行結(jié)果如下圖：

當(dāng)我們點(diǎn)擊不同的按鈕時(shí)，下面會切換不同的組件。實(shí)現(xiàn)動態(tài)組件的加載。is 的值可以是一個(gè)已經(jīng)注冊的組件的名字或者一個(gè)組件的選對象。當(dāng)我們點(diǎn)擊按鈕時(shí)，這個(gè)按鈕的 disabled 為 true 然后我們將給這個(gè)按鈕一個(gè)active 的css類,同時(shí)改變 currentCom 的值

keep-alive:動態(tài)組件的緩存

如果我們需要頻繁的切換頁面，每次都是在組件的創(chuàng)建和銷毀的狀態(tài)間切換，這無疑增大了性能的開銷。那么我們要怎么優(yōu)化呢？  
Vue提供了動態(tài)組件的 緩存。keep-alive 會在切換組件的時(shí)候緩存當(dāng)前組件的狀態(tài)，等到再次進(jìn)入這個(gè)組件，不需要重新創(chuàng)建組件，只需要從前面的緩存中讀取并渲染。

Parent.vue(其余地方代碼和上面一樣)

<template>
<div>
    <el-button-group class='btn-group'>
        <el-button v-for='(btn, index) in btnGroup' 
                   :key="index" :class="{active:btn.disabled}"  
                   @click='change(index)'>
        {{btn.name}}
        </el-button>
    </el-button-group>
    <div style='padding-top:100px;'>
    <keep-alive>
            <component :is='currentCom'></component>
    </keep-alive>
    </div>
</div>
</template>
<style scoped>
.btn-group{
    position:fixed;
}
.active{
    background-color: red;
}
</style>

Childs1.vue

<template>
    <div>
        {{title}}
        <button @click='change'>點(diǎn)我+1</button>
   </div>
</template>
<script>
export default {    
    name:'Childs1', 
    data(){
        return{
            title: 1
        }
    },
    methods:{
        change(){
            this.title += 1;
        }
    },
     mounted(){
        console.log('child1 mounted');
        
    }
}
</script>

Childs2.vue

<template>
    <div>
        Childs2
    </div>
</template>
<script>
export default {
    name:'Childs2',
    mounted(){
        console.log('child2 mounted');
        
    }
}
</script>

運(yùn)行結(jié)果如下圖：

對比：如果我們將<keep-alive></keep-alive>去掉，運(yùn)行結(jié)果如下圖：

前一組圖片在切換組件的時(shí)候，title從1加到3，然后等下次再切換回來的時(shí)候,title還是停留在3，從控制臺可以看出，Childs1.vue這個(gè)組件的mounted的鉤子函數(shù)只有一次。后一組圖片，title一開始加到3，下一次進(jìn)入這個(gè)組件的時(shí)候title又從1開始，控制臺圖片也顯示這個(gè)組件經(jīng)歷個(gè)了多次鉤子函數(shù)，說明組件是銷毀重建的。 

tips:因?yàn)榫彺娴慕M件只需要建立一次，所以如果我們要在每次進(jìn)入組件的鉤子函數(shù)里面做相應(yīng)的操作的時(shí)候，會出現(xiàn)問題，所以請明確我們使用的場景，避免出現(xiàn)bug

異步組件

異步組件存在的意義在于加載一個(gè)體量很大的頁面時(shí)，如果我們不設(shè)置加載的優(yōu)先級的話，那么可能頁面在加載視頻等信息的時(shí)候會非常占用時(shí)間，然后主要信息就會阻塞在后面在加載。這對用戶來說無疑不是一個(gè)很差的體驗(yàn)。但是如果我們設(shè)置加載的順序，那么我們可以優(yōu)先那些最重要的信息優(yōu)先顯示，優(yōu)化了整個(gè)項(xiàng)目。一般來說我們是將加載組件和 路由 （vue-router）配合在一起使用。

看完了這篇文章，相信你對Vue動態(tài)組件和異步組件是什么有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章題目：Vue動態(tài)組件和異步組件是什么
文章位置：http://bm7419.com/article40/iicdeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、定制開發(fā)、動態(tài)網(wǎng)站、網(wǎng)站建設(shè)、用戶體驗(yàn)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)