Vue的生命周期mounted(Vue3的声明周期onMounted)执行多次问题

一、 问题现象

在使用Ant Design Vue 制作后台管理系统时，发现视图的mounted生命周期函数会执行多次

二、问题原因

1. 在onMounted声明周期中打印日志，观察控制台（执行了4次）

onMounted(() => {
  console.log('mounted-----渲染次数')
})

2. 为什么是4次？

观察发现，页面上有4个页签，可能由此导致，查看页签的代码（tabs.vue）
此处的router-view 放在了v-for内，会多次渲染执行(有多少个页签就会执行多少次)

<template>
  <a-tabs
    v-model:activeKey="tabInfo.activeKey"
    class="tabs-container"
    size="small"
    hide-add
    type="editable-card"
    @change="tabChange"
    @edit="tabEdit"
  >
    <a-tab-pane
      v-for="pane in tabInfo.panes"
      :key="pane.key"
      :tab="pane.title"
      :closable="pane.closable"
      class="pane"
    >
      <!-- 此处的router-view 放在了v-for内，会多次渲染执行 -->
      <router-view></router-view>
    </a-tab-pane>
  </a-tabs>
</template>

三、解决方案

将v-for循环内的router-view 放在for循环之外即可

<template>
  <a-tabs
    v-model:activeKey="tabInfo.activeKey"
    class="tabs-container"
    size="small"
    hide-add
    type="editable-card"
    @change="tabChange"
    @edit="tabEdit"
  >
    <a-tab-pane
      v-for="pane in tabInfo.panes"
      :key="pane.key"
      :tab="pane.title"
      :closable="pane.closable"
      class="pane"
    >
    </a-tab-pane>
  </a-tabs>
  <div class="tabs-content">
    <!-- 将router-view 放在了v-for外，解决mounted多次渲染执行 -->
    <router-view></router-view>
  </div>
</template>