在 Vue 3 中，直接解构 defineProps 会丢失响应性，导致子组件脚本中无法监听 prop 变化；正确做法是保持 props 对象的响应式引用，并通过 watch 监听其变化。
在 vue 3 中，直接解构 `defineprops` 会丢失响应性，导致子组件脚本中无法监听 prop 变化；正确做法是保持 props 对象的响应式引用，并通过 `watch` 监听其变化。
Vue 3 的响应式系统依赖于对响应式对象的直接引用。当你使用解构语法（如 const { dataId } = defineProps<...>()）时，dataId 会变成一个普通静态值（即解构瞬间的快照），不再与父组件传入的响应式引用保持连接——因此模板中能实时更新（Vue 模板自动追踪响应式依赖），但脚本中 console.log(dataId) 仅执行一次，输出初始值（常为 undefined），后续更新完全不可见。
✅ 正确做法：避免解构 props，始终通过 props.xxx 访问
<script setup lang="ts">
import { watch } from 'vue'
const props = defineProps<{
dataId: number | null | undefined
}>()
// 使用 watch 监听 props.dataId 的变化（immediate: true 可捕获初始值）
watch(
() => props.dataId,
(newVal, oldVal) => {
console.log('dataId 更新了:', newVal, '（之前是:', oldVal, ')')
},
{ immediate: true }
)
</script>
<template>
<div>当前 ID：{{ dataId }}</div>
</template>⚠️ 注意事项：
- 不要解构 defineProps：const { dataId } = defineProps<...>() 是常见陷阱，会导致响应性断裂；
- watch 的回调在组件挂载时（配合 { immediate: true }）和每次 dataId 变更时触发，确保逻辑及时响应；
- 若需在 setup 中同步使用最新值（如发起 API 请求），务必在 watch 回调内处理，而非直接读取 props.dataId —— 因为 props.dataId 虽响应式，但其值在 watch 外部读取时可能尚未更新（受异步更新队列影响）；
- Vue 3.3+ 引入了实验性功能 defineProps 解构语法（需启用 defineModel 相关编译选项），但生产环境仍推荐保守写法以保障兼容性与可维护性。
总结：Vue 3 的响应式 prop 本质是“只读代理对象”，其响应性仅在未解构、直接访问时生效。坚持 props.xxx + watch 组合，是处理动态 prop 变更最可靠、最符合 Composition API 设计哲学的方式。
立即学习“前端免费学习笔记（深入）”；
