KeepAlive嵌套导致缓存组件生命周期执行了2次

[SinbadCQ]

package.json

{
  "dependencies": {
    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  },
}

router.js

[
  {
    path: '/',
    component: () => import('../views/TabBar.vue'),
    children: [
      {
        path: '',
        component: () => import('../views/Home.vue'),
      },
      {
        path: 'me',
        component: () => import('../views/Me.vue'),
      },
    ]
  },
  {
    path: '/bill',
    component: () => import('../views/Bill.vue'),
    children: [
      {
        path: 'food',
        component: () => import('../views/Food.vue'),
      },
      {
        path: 'shop',
        component: () => import('../views/Shop.vue'),
      },
    ]
  }
]

App.vue

<RouterView v-slot="{ Component }">
  <KeepAlive :include="['TabBar']">
    <component :is="Component"></component>
  </KeepAlive>
</RouterView>

TabBar.vue

<RouterView v-slot="{ Component }">
  <KeepAlive>
    <component :is="Component"></component>
  </KeepAlive>
</RouterView>

<div>tabs...</div>

Bill.vue

<RouterView v-slot="{ Component }">
  <KeepAlive>
    <component :is="Component"></component>
  </KeepAlive>
</RouterView>

为什么首次从 Home.vue 跳转到 Food.vue 时，Food.vue 的生命周期会执行2次，而且离开Food.vue回到Home.vue时，Food.vue中onActivated又会触发1次