Vue 3 中使用 Root Div 包裹 Keep-Alive 组件

在 Vue 3 中，使用 root div 包裹 keep-alive 可以通过以下步骤实现：

1. 在根组件中添加一个 div 元素，该元素将作为 keep-alive 的父元素：

<template>
  <div class='root'>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

2. 将根组件的样式设置为包含该 div 的高度和宽度：

<style>
  .root {
    width: 100%;
    height: 100%;
  }
</style>

这样就可以在 Vue 3 中使用 root div 包裹 keep-alive 了，从而实现组件缓存和优化。