為什么需要組件緩存

業務需求：一般是列表頁面通過路由跳轉到詳情頁，跳轉回來時，需要列表頁面展示上次展示的內容

代碼展示

App.vue入口

<script setup lang="ts">
import { RouterView, RouterLink } from "vue-router"
</script><template><div><RouterLink to="/">home</RouterLink><RouterLink to="/about">about</RouterLink></div><div><RouterView v-slot="{ Component }">// AboutComponent是組件的名稱,vue4組件中通過defineOptions定義<KeepAlive include="AboutComponent"><component :is="Component" /></KeepAlive></RouterView></div>
</template>

home.vue組件

<template><div>home</div>
</template><script setup lang="ts">
import { onMounted } from "vue"
defineOptions({name: "HomeComponent",
})
onMounted(() => {console.log("home onMounted")
})
</script>

about.vue組件

<template><div>about</div>
</template><script setup lang="ts">
import { onMounted } from "vue"
defineOptions({name: "AboutComponent",
})
onMounted(() => {console.log("about onMounted")
})
</script>

緩存效果

1、home和about組件首次加載都會執行onMounted生命周期，但是對about組件進行了緩存，再次切換到about組件，就不會重新初始化，就不會執行onMounted生命周期。
2、keepalive使用include和exclude實現緩存的好處是：只要被緩存的組件首次加載之后，無論在緩存組件之間切換，還是緩存組件與未緩存組件之間切換，都不會重新掛載。

為什么不用v-if

網絡上經常使用就是如下代碼：

<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view> 

雖然也能實現頁面緩存，但是從非緩存組件切換到緩存組件時，會重新掛載緩存組件，從而再次執行onMounted生命周期，只有在兩個同樣是緩存的組件之間切換才會有實際的緩存效果