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

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

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

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

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

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

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

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

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

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

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

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

keep-alive的include屬性

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

　　include表示：指定需要被緩存的組件，多個組件之間用英文的逗號分隔

keep-alive的exclude屬性

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

　　exclude表示：指定不需要被緩存的組件，多個組件之間用英文的逗號分隔

注意：include屬性和exclude屬性只能用一個，不能同時使用

補(bǔ)充：

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

<Component>

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

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 的值是被注冊的組件名
        -->
        <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的值在切換的過程中，并沒有得到保存 -->
            count: {{ count }}
        </div>
    </div>
</template>
<script>
export default {
    name: 'DynamicA',
    components: {
    },
    data() {
        return {
            count: 0
        }
    },
    // 每次當(dāng)組件被切換到時，此方法被調(diào)用了，說明當(dāng)前組件實例又被重新創(chuàng)建了
    created() {
        console.log('DynamicA created');
    },
    // 每次當(dāng)組件切換走時，此方法被調(diào)用了，說明當(dāng)前組件實例已被銷毀
    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)組件被切換到時，此方法被調(diào)用了，說明當(dāng)前組件實例又被重新創(chuàng)建了
    created() {
        console.log('DynamicA created');
    },
    // 每次當(dāng)組件切換走時，此方法被調(diào)用了，說明當(dāng)前組件實例已被銷毀
    destroyed() {
        console.log('DynamicA destroyed');
    }
}
</script>
<style>
.dynamicB {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>

在這里插入圖片描述

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

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

在上面的例子中，當(dāng)切換組件時，當(dāng)前組件實例的數(shù)據(jù)并沒有保存。但有的時候我們的確想要組件能在被“切走”的時候保留它們的狀態(tài)。要解決這個問題，我們可以用 <KeepAlive> 內(nèi)置組件將這些動態(tà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 的值是被注冊的組件名
            2. <KeepAlive> 默認(rèn)會緩存內(nèi)部的所有組件實例，
               但我們可以通過 include 和 exclude prop 來定制該行為。
               這兩個 prop 的值都可以是一個以英文逗號分隔的字符串、
               一個正則表達(dá)式，或是包含這兩種類型的一個數(shù)組
            3. 使用keepAlive后，組件切換時，并不會銷毀被切走的組件，
               只是它處于不活躍狀態(tài)，當(dāng)再次切換到它時，它又變成了活躍狀態(tài)。
               在使用了KeepAlive后，可以給組件注冊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)建該組件時，才會調(diào)用，然后被緩存下來了。后面切換的過程，都不會調(diào)用此鉤子
    created() {
        console.log('DynamicA created');
    },
    destroyed() {
        console.log('DynamicA destroyed');
    },
    activated() {
        // 在首次掛載、
        // 以及每次從緩存中被重新插入的時候調(diào)用
        console.log('DynamicA activated');
    },
    deactivated() {
        // 在從 DOM 上移除、進(jìn)入緩存
        // 以及組件卸載時調(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)建該組件時，才會調(diào)用，然后被緩存下來了。后面切換的過程，都不會調(diào)用此鉤子
    created() {
        console.log('DynamicB created');
    },
    destroyed() {
        console.log('DynamicB destroyed');
    },
    activated() {
        // 在首次掛載、
        // 以及每次從緩存中被重新插入的時候調(diào)用
        console.log('DynamicB activated');
    },
    deactivated() {
        // 在從 DOM 上移除、進(jìn)入緩存
        // 以及組件卸載時調(diào)用
        console.log('DynamicB deactivated');
    }
}
</script>
<style>
.dynamicB {
    border: 1px solid #dcdfe6;
    width: 300px;
    padding: 20px;
}
</style>

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

您可能感興趣的文章: