vue中props监听需用getter函数包裹，基础类型必须写watch(() => props.xxx)，对象数组需配置deep: true，推荐computed+watch组合优化逻辑。

Vue 中 props 是只读的外部输入，不能直接监听原始值，必须通过响应式机制“接入” watch。关键在于：用 getter 函数包裹 props 字段，再传给 watch；基础类型和引用类型处理方式不同；首次挂载是否执行、深层变化是否捕获，都得靠配置项控制。

基础类型（字符串/数字/布尔）要写 getter

不能写 watch(props.visible, ...) —— 这只是取了一次快照，后续变化无法触发。必须写成函数形式，让 Vue 每次都重新读取：

• watch(() => props.visible, (newVal) => { if (newVal) loadData(); })
• 可选加 { immediate: true } 让组件初始化时也执行一次（比如弹窗打开前先加载数据）
• 避免在回调里修改 props，应更新本地 ref 或调用 emit

对象或数组需明确 deep 配置

如果父组件替换整个对象（如 user = { id: 2 }），普通监听就能触发；但如果只是改内部字段（如 user.name = 'Alice'），就必须开启 deep: true：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• watch(() => props.user, (newVal) => { ... }, { deep: true })
• 注意性能：deep 监听会递归遍历所有嵌套属性，大型对象慎用
• 更优解是只监听关键字段，比如先用 computed 提取 computed(() => props.user?.id)，再 watch 这个计算值

避免“值没变却以为变了”的假象

watch 不触发，常见原因是父组件重复赋了相同引用或相同浅层值：

• 对象未换引用：父组件写了 data.obj.name = 'x' 但没重新赋值 data.obj = {...data.obj}，子组件 watch 就收不到通知
• 数组 push 不触发：Vue3 对数组 mutation（如 push、pop）有响应式支持，但前提是该数组本身是响应式的（来自 reactive/ref）；若父组件传的是普通数组字面量，就得靠 deep 或手动替换引用
• 建议父组件在变更后主动替换引用，例如 list = [...list, newItem] 或 obj = { ...obj, name: 'new' }

复杂逻辑推荐 computed + watch 组合

当监听条件涉及多个 props 或需要预处理时，不要把逻辑全塞进 watch 回调：

• 先用 computed 封装关注的派生状态，比如 const filterKey = computed(() => props.status + '-' + props.type)
• 再 watch(filterKey, ...) —— 更清晰、可复用、自动跳过无变化的情况
• 尤其适合多处依赖同一组合逻辑，或需要单元测试的场景

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！