Vue.js中向子组件传值遇未定义问题，使用watch是否合理？

问题根源 #

父组件中user初始为ref({})，异步请求3秒后才会更新为真实数据。子组件初始化时，const user = ref(props.data)仅将当时的空对象赋值给ref，但ref不会自动跟踪props的后续变化，导致父组件user更新后，子组件的user仍停留在初始的空对象（或可能出现的undefined状态），最终模板访问user.name时抛出类型错误。

而父组件模板能正常显示{{ user.name }}，是因为Vue响应式系统会直接跟踪user的变化，数据更新后自动触发模板重新渲染。

关于你的watch写法 #

你用watch的写法能解决问题，但并非最优解，且可以更严谨：

• 监听整个props对象会导致props中任何属性变化都触发回调，存在性能浪费；
• 未设置immediate: true，初始化时不会同步props的初始值；
• 未处理props.data可能为undefined的边界情况。

更优的解决方案 #

1. 直接使用Props（最简洁推荐）

Props本身是响应式的，无需额外定义ref，模板直接结合可选链操作符避免初始报错：

<template>
  <div>{{ data?.name }}</div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    data: { 
      type: Object,
      default: () => ({}) // 设置默认空对象，避免props.data为undefined
    },
  },
  setup(props) {
    // 无需额外处理，直接使用props.data即可
    return {}
  }
})
</script>

2. 使用Computed同步Props（需转换为ref场景）

如果需要将props转为ref（比如要基于props做局部修改，推荐通过emit通知父组件更新，而非直接修改），用computed自动跟踪props变化：

<template>
  <div>{{ user?.name }}</div>
</template>

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  props: {
    data: { 
      type: Object,
      default: () => ({})
    },
  },
  setup(props) {
    const user = computed(() => props.data)
    return { user }
  }
})
</script>

3. 优化后的Watch写法（确需使用watch时）

仅监听props.data，并添加immediate: true确保初始化同步，同时处理边界情况：

<template>
  <div>{{ user?.name }}</div>
</template>

<script>
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  props: {
    data: { 
      type: Object,
      default: () => ({})
    },
  },
  setup(props) {
    const user = ref({})
    // 仅监听data属性变化，更高效
    watch(() => props.data, (newData) => {
      user.value = newData || {} // 处理newData为undefined的情况
    }, { immediate: true }) // 初始化时立即执行一次

    return { user }
  }
})
</script>

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