Vue props 响应更新取决于父组件传递的数据是否被响应式系统追踪：✅ ref/reactive 数据可响应，❌静态值或普通对象不可响应；需用 watch 监听变化，避免解构断链、直接修改 props 等失效场景。
Vue 的响应式数据与 props 的联动更新，本质是“父组件状态驱动子组件视图”的自然结果——只要父组件传的是响应式数据，子组件就能自动同步更新；反之，若传的是静态值或普通变量，就不会响应变化。
确保 props 接收的是响应式数据
子组件能否响应更新，取决于父组件传递的内容是否被 Vue 的响应式系统追踪。关键不是“有没有传”，而是“传的是什么”：
- ✅ 正确：用 ref 或 reactive 定义的数据，再通过
:prop="state.value"或:prop="obj"绑定 - ❌ 错误：直接写死字符串如
title="用户中心"，或绑定普通对象:user="plainObj"（未用 reactive 包裹） - ⚠️ 注意：
props本身是只读的响应式代理，但它的响应性完全继承自父组件所传源数据的响应性
监听 props 变化并触发逻辑
当 props 更新时，子组件常需执行副作用操作（如请求、重置表单、触发动画）。推荐使用 watch 而非 watchEffect，因为它能明确区分新旧值：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 监听单个 prop：
watch(() => props.id, (newId, oldId) => { ... }) - 监听多个 prop：
watch([() => props.id, () => props.status], ([newId, newStatus], [oldId, oldStatus]) => {...}) - 深度监听嵌套对象属性：
watch(() => props.user, (newUser) => { ... }, { deep: true })
避免常见失效场景
很多“props 没更新”问题其实源于数据源头没响应，而非子组件写法错误：
立即学习“前端免费学习笔记（深入）”；
- 父组件中修改了普通对象属性，但该对象未用
reactive包裹 → 不触发更新 - 父组件用解构赋值后传参，如
const { name } = user; <Child :name="name" />→ 断开响应链 - 子组件试图直接修改 props（如
this.$props.count++）→ 控制台报错且无效，应通过emit通知父组件修改 - 使用
v-for渲染子组件时，key 值未随数据变化而更新 → Vue 复用旧实例，跳过 props 更新流程
配合 v-model 实现双向联动（语法糖）
v-model 是 :modelValue + @update:modelValue 的组合，在父子通信中让 props 更新更简洁：
- 父组件：
<MyInput v-model="searchText" /> - 子组件声明：
props: { modelValue: String }，并在内部触发this.$emit('update:modelValue', newValue) - 效果等价于手动监听 + emit，但更符合表单类组件的直觉表达
