使用Nuxt Composition API时default.vue布局中组件为何渲染两次？

问题详情 #

使用Nuxt Composition API开发Web应用时，layouts/default.vue中的首个组件在页面刷新时会被渲染两次，调整组件顺序无法解决该问题；但从其他页面或布局切换至default.vue时，组件仅渲染一次。

布局代码（default.vue） #

.layout-default
  header(showLanguage :langUrl="langUrl")
  mobile-header(:class="{ 'sticky-header': isSticky }")
  section.main-menu(v-for="menu in menuList")
    .main-category
      .flex
        .menu-content.relative.container
          header-menu(:items="menu.main.title" :visible="true")
          ys-breaking-news
          ys-weather-pray

  finance
  nuxt(keep-alive)
  .w-full.flex(v-observe-visibility="visibilityChanged")
    .flex.container(v-if="isVisibleRef")
      footer
  ys-modal.login-modal.login-successull.login-toast(ref="successModal")
   toast(ref="successRef" width="50" @closeToast="closeSuccessToast")

Mounted钩子控制台日志 #

header mount
header mount
breaking news
weather mount

排查与解决方案 #

1. 检查keep-alive的冲突影响 #

布局中nuxt标签启用了keep-alive，刷新页面时Nuxt初始化流程可能会先渲染一次组件，再处理缓存逻辑导致重复渲染。临时移除keep-alive属性测试：

nuxt

若问题消失，可通过页面组件的meta控制缓存范围，避免布局组件被意外缓存：

// 页面组件的setup中
useRoute().meta.keepAlive = true // 仅缓存页面内容，布局组件不参与

2. 确保布局根节点唯一性与稳定性 #

检查Pug模板是否因语法问题生成多根节点，给根节点添加唯一key避免重复渲染：

.layout-default(:key="layoutKey")

在布局的setup中生成唯一标识：

const layoutKey = ref(Date.now())

3. 异步数据加载的渲染时机问题 #

如果menuList、langUrl等数据是异步获取，刷新时数据未就绪会先渲染一次组件，数据更新后触发二次渲染。添加加载状态，等待数据就绪后再渲染：

.layout-default(v-if="isDataLoaded")
  header(showLanguage :langUrl="langUrl")
  //- 其他组件内容

// 布局setup中
const isDataLoaded = ref(false)
const fetchLayoutData = async () => {
  await fetchMenuList() // 假设这是获取菜单的异步方法
  isDataLoaded.value = true
}
onMounted(fetchLayoutData)

4. SSR与客户端Hydrate的兼容性问题 #

若项目开启SSR，服务端渲染与客户端hydrate阶段可能导致组件重复执行mounted逻辑。临时关闭SSR测试：

// nuxt.config.js
export default {
  ssr: false
}

若问题解决，需确保组件仅在客户端执行DOM相关逻辑：

onMounted(() => {
  if (process.client) {
    // 仅客户端运行的代码
  }
})

内容的提问来源于stack exchange，提问作者oktay tontaş