vue3使用router-view，子组件的钩子函数执行多次

Question

在vue3的子组件中用onMounted时，被执行了很多次，执行的次数是子组件数量
vue3中的路由设置如下：

routers:[
    {
        path:"/a",
        name:"a",
        component:a.vue,
        redirect: "/a/b",
        children:[
            {
                path:"/a/b",
                name:"b",
                component:b.vue,
            },
            {
                path:"/a/c",
                name:"c",
                component:c.vue,
            },
            {
                path:"/a/d",
                name:"d",
                component:d.vue,
            }
        ]
    }
]

父组件a中的代码如下：

<template>
  <div>
    //左侧菜单栏
    <div class="menu">
      <div class="menu-item" @click="routeB">
        <span>菜单B</span>
      </div>
      <div class="menu-item" @click="routeC">
        <span>菜单C</span>
      </div>
      <div class="menu-item" @click="routeD">
        <span>菜单D</span>
      </div>
    </div>
    <div class="router-view-container">
      //右侧显示子组件
      <div class="router-view-content">
        //根据菜单的点击选项显示的不同子组件
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
const routeB = () => {
  $router.push({name: "b"})
}
const routeC = () => {
  $router.push({name: "c"})
}
const routeD = () => {
  $router.push({name: "d"})
}
</script>

子组件B中的代码为：

<template>
  <div class="child-b">

  </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log("这是B组件")
})
</script>

当页面加载时，B组件或者C组件中的onMounted函数加载了很多次，经过测试，这个加载次数个跟A组件的子组件数量有关，这个例子中，A组件有B、C、D三个子组件，所以执行了三次

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

在 Vue 3 中，onMounted 钩子函数通常只在组件挂载完成后执行一次。然而，根据你的描述，onMounted 在子组件中被执行多次，这通常不是预期的行为。这种情况可能是由以下几个原因造成的：

1. 组件重复渲染：如果父组件或子组件的某些数据或计算属性触发了子组件的重新渲染，那么每次渲染都会导致 onMounted 钩子再次执行。

2. 路由视图重用：Vue Router 3 使用了一种新的路由视图重用机制，当路由跳转时，如果新旧路由的组件相同，Vue Router 会尝试重用组件实例而不是销毁并重新创建。这可能导致 onMounted 钩子在组件实例重用时再次触发。

3. 全局状态管理：如果你使用了 Vuex 或其他全局状态管理库，并且状态的变化触发了子组件的重新渲染，这也可能导致 onMounted 钩子多次执行。

4. 组件内部逻辑问题：如果子组件内部有逻辑错误，比如在 onMounted 内部调用了导致组件重新渲染的方法，这也可能导致问题。

为了解决这个问题，你可以尝试以下步骤：

• 检查组件的依赖：确保子组件没有依赖于父组件的响应式数据，这可能导致子组件的重复渲染。

• 使用 onActivated 或 onDeactivated 钩子：如果你需要在路由视图激活或停用时执行某些操作，可以使用 onActivated 和 onDeactivated 钩子代替 onMounted。

• 使用 setup 函数：在 Vue 3 中，setup 函数是 Composition API 的入口点，你可以在 setup 函数中执行初始化逻辑，而不是使用 onMounted 钩子。

• 调试和日志：添加更多的日志输出，以确定 onMounted 钩子的确切触发次数和触发时机。

• 检查路由配置：确保路由配置正确，没有导致组件重复渲染的逻辑错误。

如果问题仍然存在，你可能需要提供更多的代码或上下文信息，以便进一步分析问题的原因。