Vue3之組件狀態(tài)保持KeepAlive的簡(jiǎn)單使用

更新時(shí)間：2024年05月08日 10:32:36 作者：NorthCastle

這篇文章主要介紹了Vue3之組件狀態(tài)保持KeepAlive的簡(jiǎn)單使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

作用說(shuō)明

一個(gè)應(yīng)用場(chǎng)景

當(dāng)我們?cè)谶M(jìn)行路由跳轉(zhuǎn)的時(shí)候，會(huì)用到 <router-view> 來(lái)作為組件渲染的出口，此時(shí)，組件的狀態(tài)是不會(huì)被保持的。

比如：當(dāng)前在【組件A】中有一個(gè)響應(yīng)式狀態(tài) num 的值通過(guò) 自加的方式從初始值0 變成了 100；

然后跳轉(zhuǎn)到【組件B】，

再次跳轉(zhuǎn) 回到【組件A】的時(shí)候，num 的值會(huì) 恢復(fù)為初始值 0。

如何實(shí)現(xiàn) 回到【組件A】的時(shí)候，仍然保持 num 的數(shù)據(jù)狀態(tài)為 100 呢？

這就是本文要介紹的 KeepAlive 組件的作用。

它就是用來(lái)做組件狀態(tài)保持的，或者叫做緩存組件實(shí)例。

KeepAlive的簡(jiǎn)單介紹

1、直接使用 <keep-alive> 標(biāo)簽，將目標(biāo)組件包起來(lái)，就實(shí)現(xiàn)了組件的緩存；

2、配合路由的時(shí)候，需要使用到下面的格式 : 這個(gè)格式是固定的：

    <router-view v-slot="{ Component }">
        <keep-alive>
             <component :is="Component" />
         </keep-alive>
     </router-view>

3、組件在緩存的時(shí)候，有兩個(gè)聲明周期鉤子可以配合使用：

onActivated : 組件在被激活時(shí)觸發(fā)
onDeactivated : 組件在跳轉(zhuǎn)走被緩存時(shí)觸發(fā)

4、KeepAlive 有兩個(gè)屬性：

include : 指定要緩存的組件
exculde : 指定 不要 緩存的組件

以上兩個(gè)屬性的值是 組件的名稱, 可以是數(shù)組的形式指定多個(gè)組件。

例如：有兩個(gè)組件，name 分別是 a 和 b

例1 ：<keep-alive include="a">
例2 ： <keep-alive :include="['a','b']">

注意，當(dāng)是數(shù)組的時(shí)候，需要使用 :的形式。

代碼案例

本案例有兩個(gè)普通的組件，分別包含了響應(yīng)式狀態(tài)，

App.vue 中通過(guò) 按鈕進(jìn)行兩個(gè)組件的切換；

觀察 1：兩個(gè)組件的響應(yīng)式狀態(tài)是否保存了；
觀察2 ：兩個(gè)組件的聲明周期鉤子。

本案例的項(xiàng)目結(jié)構(gòu)如下：

projectName
    | -- src
        | -- App.vue            # 根組件
        | -- componentA.vue     # 組件A
        | -- componentB.vue     # 組件B
        | -- main.ts            # 程序入口文件
        | -- router.ts          # 路由配置文件
    | -- index.html             # 項(xiàng)目的入口文件

案例代碼

組件A componentA.vue

<template>
    <div class="diva">
        這是組件A
        <br>
        countNum : {{ countNum }}
        <br>
        <button @click="countNum++">+</button>
        <button @click="countNum--">-</button>
    </div>
    
</template>

<script setup lang="ts">

    // 指定組件名稱
    defineOptions({
        name:'ca'
    })

    import { ref,onMounted,onUnmounted,onActivated,onDeactivated} from 'vue'

    const countNum = ref(0)

    // 組件掛載成功后
    onMounted(()=>{
        console.log('組件A onMounted')
    })
    // 組件卸載成功后
    onUnmounted(() => {
        console.log('組件A onUnmounted')
    }),
    // 組件激活
    onActivated(()=>{
        console.log('組件A onActivated')
    })
    // 組件失活
    onDeactivated(()=>{
        console.log('組件A onDeactivated')
    })

 
</script>

<style scoped>
    .diva{
        width: 300px;
        height: 200px;
        background: red;
    }
</style>

組件B componentB.vue

<template>
    <div class="divb">
        這是組件B
        <br>
        message : {{ message }}
        <br>
        輸入框 ：<input type="text" v-model="message" />

    </div>
    
</template>

<script setup lang="ts">

    // 指定組件名稱
    defineOptions({
        name:'cb'
    })

    import { ref,onMounted,onUnmounted,onActivated,onDeactivated} from 'vue'

    const message = ref('')

    // 組件掛載成功后
    onMounted(()=>{
        console.log('組件B onMounted')
    })
    // 組件卸載成功后
    onUnmounted(() => {
        console.log('組件B onUnmounted')
    }),
    // 組件激活
    onActivated(()=>{
        console.log('組件B onActivated')
    })
    // 組件失活
    onDeactivated(()=>{
        console.log('組件B onDeactivated')
    })

</script>

<style scoped>
    .divb{
        width: 250px;
        height: 150px;
        background: green;
    }
</style>

路由配置 router.ts

// 導(dǎo)入 定義路由的兩個(gè)方法
import {createRouter,createWebHistory}  from 'vue-router'

// 懶加載寫法 ： 先聲明，下面直接使用
const componentA = () => import('./componentA.vue')
const componentB = () => import('./componentB.vue')

// 聲明路由跳轉(zhuǎn)的路徑與組件的對(duì)應(yīng)關(guān)系
const routsList = [
    // 直接使用上面聲明的組件
    {path:'/a',name:'aroute',component:componentA},
    {path:'/b',name:'broute',component:componentB}
]

// 創(chuàng)建路由的實(shí)例對(duì)象
const routerConfigObj = createRouter({
    history:createWebHistory('abc'), // 帶一個(gè)參數(shù)，表示是路由的一個(gè)前綴
    routes:routsList // 指定路由的配置列表
})

// 導(dǎo)出路由的對(duì)象
export default routerConfigObj;

根組件 App.vue

<template>

    <div class="basediv">
      
        APP.vue 中的 msg : {{ msg }}
        <br>
        <button @click="$router.push('/a')">跳轉(zhuǎn)到A</button>
        <button @click="$router.push('/b')">跳轉(zhuǎn)到B</button>
        <br>

        <!-- 核心 ： keep-alive 的使用 -->
        <router-view v-slot="{ Component }">
            <!--  :exclude="['ca','cb']" -->
            <keep-alive :include="['ca','cb']">
                <component :is="Component" />
            </keep-alive>
        </router-view>

    </div>
    
  
</template>
    
<script setup lang="ts">

	// 引入 provide 方法
    import { ref } from 'vue'
    // 聲明父組件的一個(gè)變量
    const msg = ref('這是App根組件的msg變量')
    
</script>
    
<style scoped>

    .basediv{
        width: 600px;
        height: 400px;
        border: 1px solid red;
    }
</style>