Nuxt3中computed判断后条件传递props异常求助

核心问题 #

你的计算属性test在服务端渲染阶段返回undefined，Vue会将undefined判定为假值，因此初始渲染时无论客户端实际屏幕尺寸如何，都会传递brands.mobileLoaderImages。即便客户端hydration后计算属性更新为正确布尔值，也可能因Loader组件的渲染逻辑缺陷，导致props未同步更新。

另外，Loader组件的v-for缺失唯一key，这会让Vue无法正确识别列表项变化，即便props更新，DOM也不会同步刷新。

修复步骤 #

1. 修正计算属性的服务端返回值 #

避免返回undefined，给服务端设置合理默认值（比如默认判定为桌面端，或通过请求头的user-agent做简单判断），确保计算属性始终返回布尔类型：

const test = computed(() => {
  if (process.client) {
    console.log('Did work. Is mobile?', window.innerWidth < 768)
    return window.innerWidth < 768
  } else {
    // 服务端通过user-agent判断设备类型，或直接默认返回桌面端
    const headers = useRequestHeaders(['user-agent'])
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(headers['user-agent'] || '')
    console.log('Server side, is mobile?', isMobile)
    return isMobile
  }
})

也可以直接用VueUse的useWindowSize，它已内置处理SSR场景的逻辑：

import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const test = computed(() => width.value < 768)

2. 给Loader组件的v-for添加唯一key #

在循环中使用图片的唯一标识作为key，确保Vue能正确追踪列表项变化：

<template>
  <div class="Loader">
    <div
      class="image"
      ref="$image"
      v-for="(image, index) in props.images"
      :key="image.asset._ref"
    >
      <SanityImage
        :asset-id="image.asset._ref"
        alt="Loader Visual"
        auto="format"
      />
    </div>
  </div>
</template>

3. 验证图片数组的有效性 #

确认brands.desktopLoaderImages和brands.mobileLoaderImages均为有效数组，避免因某一数组为空或未定义导致的逻辑偏差。

额外说明 #

Nuxt3的SSR机制会先在服务端渲染页面，再在客户端做hydration。如果服务端与客户端的初始状态不一致，不仅会触发hydration不匹配警告，还会影响props的初始传递逻辑。确保计算属性在服务端和客户端都能返回合理值，是解决这类问题的核心。

内容的提问来源于stack exchange，提问作者victorcngo