詳解vue中的動(dòng)態(tài)組件component和keep-alive

更新時(shí)間：2023年11月30日 11:23:55 作者：西瓜南瓜哈密瓜

這篇文章主要介紹了詳解vue中的動(dòng)態(tài)組件component和keep-alive的相關(guān)資料,這大家需要注意include屬性和exclude屬性只能用一個(gè),不能同時(shí)使用,本文給大家介紹的非常詳細(xì),需要的朋友參考下吧

關(guān)于vue中的動(dòng)態(tài)組件component和keep-alive

component標(biāo)簽是vue內(nèi)置的，作用：組件的占位符

<component is="組件名稱"></component>

其中is屬性的值表示要渲染的組件的名字，也就是components節(jié)點(diǎn)下的組件名稱

當(dāng)我們動(dòng)態(tài)切換組件名稱時(shí)，每切換一次，組件就會(huì)被銷毀一次，若不想讓組件被銷毀，則需要用到標(biāo)簽keep-alive

<keep-alive>
     <component is="組件名稱"></component>
</keep-alive>

keep-alive可以把內(nèi)部的組件進(jìn)行緩存，而不是銷毀組件

使用keep-alive標(biāo)簽后會(huì)生成兩個(gè)新的生命周期：activated（組件被激活）、deactivated（組件被緩存）

注意：使用keep-alive標(biāo)簽后，組件第一次被顯示時(shí)，既會(huì)執(zhí)行created()也會(huì)執(zhí)行activated()；當(dāng)組件第二次顯示時(shí)，只會(huì)執(zhí)行activated()

keep-alive的include屬性

<keep-alive include="組件名稱，多個(gè)組件之間用英文的逗號(hào)分隔">
     <component is="組件名稱"></component>
</keep-alive>

　　include表示：指定需要被緩存的組件，多個(gè)組件之間用英文的逗號(hào)分隔

keep-alive的exclude屬性

<keep-alive exclude="組件名稱，多個(gè)組件之間用英文的逗號(hào)分隔">
     <component is="組件名稱"></component>
</keep-alive>

　　exclude表示：指定不需要被緩存的組件，多個(gè)組件之間用英文的逗號(hào)分隔

注意：include屬性和exclude屬性只能用一個(gè)，不能同時(shí)使用

補(bǔ)充：

vue動(dòng)態(tài)組件＜Component＞與＜KeepAlive＞

<Component>

使用動(dòng)態(tài)組件<Component>可以實(shí)現(xiàn)兩個(gè)組件間來(lái)回切換，我們只需要傳給is屬性對(duì)應(yīng)的組件名即可
當(dāng)切換成另一個(gè)組件時(shí)候，當(dāng)前組件會(huì)被銷毀，另一個(gè)組件將被重新創(chuàng)建，原本示例上的數(shù)據(jù)不會(huì)保存

Dynamic.vue

<template>
    <div>
        <el-button-group>
            <el-button @click="componentName='DynamicA'">DynamicA</el-button>
            <el-button @click="componentName='DynamicB'">DynamicB</el-button>
        </el-button-group>
        <!-- 
            被傳給 :is 的值是被注冊(cè)的組件名
        -->
        <component :is="componentName"></component>
    </div>
</template>
<script>
import DynamicA from './DynamicA.vue';
import DynamicB from './DynamicB.vue';
export default {
    name: '',
    components: {
        DynamicA,
        DynamicB,
    },
    data() {
        return {
            componentName: ''
        }
    }
}
</script>
<style>
</style>

DynamicA.vue

<template>
    <div class="dynamicA">
        DynamicA
        <div>
            <el-button @click="count+=1">count+1</el-button>
            <!-- count的值在切換的過(guò)程中，并沒有得到保存 -->
            count: {{ count }}
        </div>
    </div>
</template>
<script>
export default {
    name: 'DynamicA',
    components: {
    },
    data() {
        return {
            count: 0
        }
    },
    // 每次當(dāng)組件被切換到時(shí)，此方法被調(diào)用了，說(shuō)明當(dāng)前組件實(shí)例又被重新創(chuàng)建了
    created() {
        console.log('DynamicA created');
    },
    // 每次當(dāng)組件切換走時(shí)，此方法被調(diào)用了，說(shuō)明當(dāng)前組件實(shí)例已被銷毀
    destroyed() {
        console.log('DynamicA destroyed');
    }
}
</script>
<style>
.dynamicA {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>

DynamicB.vue

<template>
    <div class="dynamicB">
        DynamicB
        <el-input v-model="inputVal"></el-input>
    </div>
</template>
<script>
export default {
    name: 'DynamicB',
    components: {
    },
    data() {
        return {
            inputVal:''
        }
    },
    // 每次當(dāng)組件被切換到時(shí)，此方法被調(diào)用了，說(shuō)明當(dāng)前組件實(shí)例又被重新創(chuàng)建了
    created() {
        console.log('DynamicA created');
    },
    // 每次當(dāng)組件切換走時(shí)，此方法被調(diào)用了，說(shuō)明當(dāng)前組件實(shí)例已被銷毀
    destroyed() {
        console.log('DynamicA destroyed');
    }
}
</script>
<style>
.dynamicB {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>

在這里插入圖片描述

<KeepAlive> 是一個(gè)內(nèi)置組件，它的功能是在多個(gè)組件間動(dòng)態(tài)切換時(shí)緩存被移除的組件實(shí)例。

默認(rèn)情況下，一個(gè)組件實(shí)例在被替換掉后會(huì)被銷毀。這會(huì)導(dǎo)致它丟失其中所有已變化的狀態(tài)——當(dāng)這個(gè)組件再一次被顯示時(shí)，會(huì)創(chuàng)建一個(gè)只帶有初始狀態(tài)的新實(shí)例。

在上面的例子中，當(dāng)切換組件時(shí)，當(dāng)前組件實(shí)例的數(shù)據(jù)并沒有保存。但有的時(shí)候我們的確想要組件能在被“切走”的時(shí)候保留它們的狀態(tài)。要解決這個(gè)問題，我們可以用 <KeepAlive> 內(nèi)置組件將這些動(dòng)態(tài)組件包裝起來(lái)。

Dynamic.vue

<template>
    <div>
        <el-button-group>
            <el-button @click="componentName='DynamicA'">DynamicA</el-button>
            <el-button @click="componentName='DynamicB'">DynamicB</el-button>
        </el-button-group>
        <!-- 
            1. 被傳給 :is 的值是被注冊(cè)的組件名
            2. <KeepAlive> 默認(rèn)會(huì)緩存內(nèi)部的所有組件實(shí)例，
               但我們可以通過(guò) include 和 exclude prop 來(lái)定制該行為。
               這兩個(gè) prop 的值都可以是一個(gè)以英文逗號(hào)分隔的字符串、
               一個(gè)正則表達(dá)式，或是包含這兩種類型的一個(gè)數(shù)組
            3. 使用keepAlive后，組件切換時(shí)，并不會(huì)銷毀被切走的組件，
               只是它處于不活躍狀態(tài)，當(dāng)再次切換到它時(shí)，它又變成了活躍狀態(tài)。
               在使用了KeepAlive后，可以給組件注冊(cè)activated和deactiveted聲明周期鉤子函數(shù)
        -->
        <keep-alive :include="['DynamicA','DynamicB']">
            <component :is="componentName"></component>
        </keep-alive>
    </div>
</template>
<script>
import DynamicA from './DynamicA.vue';
import DynamicB from './DynamicB.vue';
export default {
    name: '',
    components: {
        DynamicA,
        DynamicB,
    },
    data() {
        return {
            componentName: ''
        }
    },
}
</script>
<style>
</style>

DynamicA.vue

<template>
    <div class="dynamicA">
        DynamicA
        <div>
            <el-button @click="count+=1">count+1</el-button>
            count: {{ count }}
        </div>
    </div>
</template>
<script>
export default {
    name: 'DynamicA',
    components: {
    },
    data() {
        return {
            count: 0
        }
    },
    // 只有第一次創(chuàng)建該組件時(shí)，才會(huì)調(diào)用，然后被緩存下來(lái)了。后面切換的過(guò)程，都不會(huì)調(diào)用此鉤子
    created() {
        console.log('DynamicA created');
    },
    destroyed() {
        console.log('DynamicA destroyed');
    },
    activated() {
        // 在首次掛載、
        // 以及每次從緩存中被重新插入的時(shí)候調(diào)用
        console.log('DynamicA activated');
    },
    deactivated() {
        // 在從 DOM 上移除、進(jìn)入緩存
        // 以及組件卸載時(shí)調(diào)用
        console.log('DynamicA deactivated');
    }
}
</script>
<style>
.dynamicA {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>

DynamicB.vue

<template>
    <div class="dynamicB">
        DynamicB
        <el-input v-model="inputVal"></el-input>
    </div>
</template>
<script>
export default {
    name: 'DynamicB',
    components: {
    },
    data() {
        return {
            inputVal:''
        }
    },
    // 只有第一次創(chuàng)建該組件時(shí)，才會(huì)調(diào)用，然后被緩存下來(lái)了。后面切換的過(guò)程，都不會(huì)調(diào)用此鉤子
    created() {
        console.log('DynamicB created');
    },
    destroyed() {
        console.log('DynamicB destroyed');
    },
    activated() {
        // 在首次掛載、
        // 以及每次從緩存中被重新插入的時(shí)候調(diào)用
        console.log('DynamicB activated');
    },
    deactivated() {
        // 在從 DOM 上移除、進(jìn)入緩存
        // 以及組件卸載時(shí)調(diào)用
        console.log('DynamicB deactivated');
    }
}
</script>
<style>
.dynamicB {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>

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

您可能感興趣的文章: