Nuxt3中mounted钩子首次无法接收props值的问题求助

你的问题根源有两个：

• 父组件错误地直接替换reactive创建的对象，导致响应式绑定失效
• 子组件onMounted仅执行一次，此时父组件的异步请求还未完成，自然拿不到完整数据

第一步：修复父组件的响应式赋值问题 #

reactive创建的对象不能直接用=整体替换，这会丢失响应式特性。正确做法是用Object.assign将接口返回的数据合并到已有对象中：

<template>
  <ChildComponent :form-data="formData.childData" />
</template>
<script setup>
const formData = reactive({
  // 初始化默认结构，避免childData undefined
  childData: {}
});

onMounted(async () => {
  const { data, error } = await useFetch("my-api-url");
  if (data.value) {
    // 合并数据，保留响应式绑定
    Object.assign(formData, data.value);
  }
});
</script>

如果接口返回数据本身就是childData的结构，也可以直接赋值：formData.childData = data.value，同样能保留响应式。

第二步：子组件监听Props变化获取数据 #

由于父组件数据是异步加载的，onMounted执行时props还未更新，此时需要通过监听Props的变化来获取完整数据，有两种标准方案：

方案一：用watch监听指定Props

<template>
  <div>{{ formData }}</div>
</template>
<script setup>
const props = defineProps({
  formData: {
    type: Object,
    required: true,
    // 对象类型default必须用函数返回，避免多实例共享引用
    default: () => ({})
  },
});

// 深度监听对象变化，数据就绪时执行逻辑
watch(props.formData, (newVal) => {
  // 过滤初始空对象的情况
  if (Object.keys(newVal).length) {
    console.log(newVal);
    // 这里编写你的业务逻辑
  }
}, { deep: true });

// 若需要组件挂载时立即执行一次，添加immediate: true
// watch(props.formData, (newVal) => { ... }, { deep: true, immediate: true });
</script>

方案二：用watchEffect自动追踪依赖

如果业务逻辑依赖props.formData的多个属性，watchEffect会自动追踪依赖，写法更简洁：

<script setup>
const props = defineProps({
  formData: {
    type: Object,
    required: true,
    default: () => ({})
  },
});

watchEffect(() => {
  const data = props.formData;
  if (Object.keys(data).length) {
    console.log(data);
    // 编写业务逻辑
  }
});
</script>

额外注意点 #

• 子组件中对象类型的props默认值必须用函数返回，否则会导致多个组件实例共享同一个对象，引发异常。
• 模板中可以直接使用props.formData，Nuxt的响应式系统会自动更新视图，无需手动处理。

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