Vue中watch不能直接监听prop初始值变化，需根据类型选择策略：基础类型用immediate；引用类型需deep或计算属性；父组件应更新引用确保响应式。
在 Vue 中，watch 本身不能直接监听 prop 的初始值变化（比如父组件传入的原始对象或数组），尤其当 prop 是引用类型且父组件未替换整个引用时，子组件可能“感知不到变化”，导致视图不刷新。关键不是“用不用 watch”，而是怎么用对、用准、用稳。
✅ 正确监听基础类型 Prop（字符串、数字、布尔）
基础类型值传递是拷贝，父组件更新时会触发新值赋值，watch 可直接响应：
- 确保
watch配置项中启用immediate: true，若需在组件初始化时也执行逻辑（比如首次加载数据） - 避免在 handler 中直接修改 prop（Vue 会警告），应通过
$emit通知父组件变更 - 示例：
props: { userId: String },<br>watch: {<br> userId: {<br> handler(newId) { this.fetchUser(newId); },<br> immediate: true<br> }<br>}
✅ 深度监听引用类型 Prop（对象、数组）
当 prop 是对象或数组，父组件仅修改其内部属性（如 user.name = 'Alice'），watch 默认不会触发——因为引用没变。此时必须开启深度监听：
- 设置
deep: true，但注意：它只对对象/数组的**嵌套属性变化**有效，且有性能开销 - 仅在必要时监听整个对象；更推荐监听具体字段，或用计算属性 + watch 组合
- 示例：
props: { config: Object },<br>watch: {<br> config: {<br> handler(newVal) { console.log('config changed'); },<br> deep: true,<br> immediate: true<br> }<br>}
✅ 替代方案：用计算属性派生 + 监听计算属性
比直接 watch 复杂 prop 更可控、更可读，尤其适合需要格式化、过滤或组合多个 prop 的场景：
- 把 prop 转为计算属性（如
computed: { fullName() { return this.user?.firstName + ' ' + this.user?.lastName } }） - watch 这个计算属性，它会在依赖的 prop 发生响应式变化时自动更新并触发 watch
- 天然规避了 deep 带来的性能问题，也避免监听整个大对象
✅ 根本解法：让父组件“真正改变引用”
如果子组件始终不更新，很可能是因为父组件没有触发 Vue 的响应式更新机制：
- 对数组：避免使用
arr[index] = newVal或arr.length = 0，改用Vue.set(arr, index, newVal)（Vue 2）或arr.splice(index, 1, newVal)；Vue 3 中优先用ref+reactive并确保用响应式 API 修改 - 对对象：避免
obj.key = val（若 key 原本不存在），改用Vue.set(obj, 'key', val)（Vue 2）或用reactive包裹后直接赋值（Vue 3 已支持新增属性响应式） - 最稳妥方式：父组件每次更新都传递一个新对象/数组引用，例如
:config=" {...props.config, version: Date.now() }"
