Vue组合式API中props是只读响应式代理，直接解构会丢失响应性，须用toRefs；派生状态应使用computed；修改需通过emit通知父组件。

Vue 组合式 API 中，响应式数据与 Props 的联动不是自动发生的，而是依赖明确的响应式机制和正确的使用方式。Props 本身是只读的响应式代理，但若直接解构或错误引用，就会切断与父组件的响应连接——这正是联动失效的常见根源。

Props 本身就是响应式，但不可写

Vue 3 内部将传入的 props 包装为一个只读的 reactive 代理对象。这意味着：
✅ 父组件更新 ref 或 reactive 数据时，子组件 props 会同步更新；
❌ 子组件不能直接修改 props.count = 10，否则会抛出警告；
⚠️ 即使 props 是对象类型（如 user: Object），其内部属性（user.name）仍具备深度响应性，前提是父组件传递的是响应式数据（如 ref 或 reactive）。

解构 props 必须用 toRefs 保持响应

直接解构会丢失响应性，因为原始值被赋给普通变量：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 错误写法：const { title, count } = defineProps({ title: String, count: Number }) → title 和 count 变成普通字符串/数字，不再响应父组件变化
• 正确写法：const props = defineProps({ title: String, count: Number }); const { title, count } = toRefs(props) → title 和 count 是 ref，可响应式读取（title.value、count.value），也可在模板中直接用 {{ title }}（自动解包）

响应式数据与 props 的计算联动

当需要基于 props 派生新状态（如格式化、条件判断），应使用 computed 而非普通 ref：

立即学习“前端免费学习笔记（深入）”；

• 推荐：const displayName = computed(() => props.title?.trim() || 'Untitled')
• 不推荐：const displayName = ref(props.title) → 初始值正确，但 props.title 后续变更不会更新 displayName
• 注意：computed 依赖 props 的某个字段时，该字段必须通过 props.xxx 访问（或 toRefs 解构后的 ref），否则无法建立响应依赖链

需要修改 props 时，应通过事件通知父组件

子组件不能直接改 props，但可通过 emit 实现“受控联动”：

• 定义事件：const emit = defineEmits(['update:count'])
• 触发更新：emit('update:count', newCount)
• 父组件配合 v-model:count="parentCount" 或 :count="parentCount" @update:count="parentCount = $event"
• 这样既维持单向数据流，又实现父子双向协作，且全程保有响应性