Vue3响应式Prop更新无法在子组件脚本中生效

核心问题拆解 #

1. 初始值导致的首次undefined
   父组件中someDataId用ref()无参初始化，默认值为undefined。子组件首次渲染时，console.log(dataId)执行的是初始渲染的props值，所以打印undefined是正常初始状态，并非同步问题。

2. 解构Props丢失响应性
   在<script setup>中，defineProps返回的是响应式Props对象，但直接用const { dataId } = defineProps(...)解构后，dataId会失去响应性——它只是普通变量，不会随Props更新同步。这就是watch监听无反应、onUpdated拿不到最新值的根本原因。

具体解决步骤 #

1. 正确监听Props变化（保留响应性）

不要直接解构Props，改用以下两种方式：

• 方式一：直接使用Props对象

<script setup lang="ts">
import { watch } from 'vue'

const props = defineProps<{
    dataId: number | null | undefined
}>()

// 监听dataId属性变化，immediate: true 触发首次打印
watch(() => props.dataId, (newVal) => {
    console.log('dataId更新:', newVal)
}, { immediate: true })
</script>

• 方式二：用toRefs解构响应式Props

<script setup lang="ts">
import { toRefs, watch } from 'vue'

const props = defineProps<{
    dataId: number | null | undefined
}>()
const { dataId } = toRefs(props) // 解构为响应式ref

watch(dataId, (newVal) => {
    console.log('dataId更新:', newVal)
}, { immediate: true })
</script>

2. 正确使用onUpdated

通过响应式Props对象获取最新值：

<script setup lang="ts">
import { onUpdated } from 'vue'

const props = defineProps<{
    dataId: number | null | undefined
}>()

onUpdated(() => {
    console.log('更新后dataId:', props.dataId)
})
</script>

3. 验证父组件更新触发

确认父组件someFunction确实被调用，可在父组件加日志验证：

<script setup lang="ts">
import { ref } from 'vue'

const someDataId = ref<number | null>()

const someFunction = (id) => {
    console.log('父组件更新someDataId:', id)
    someDataId.value = id
}
</script>

补充说明 #

子组件模板能正常显示更新后的值，是因为模板会自动追踪Props的响应式变化——即使解构了Props，模板里的{{ dataId }}实际仍访问原始响应式Props对象。但脚本中的解构变量脱离了响应式链路，因此无法同步更新。

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