Vue中监听props变化必须用getter函数包裹，如() => props.userId；直接传props.xxx或未用getter监听对象均会失效，支持immediate和点号路径语法。
Vue 中监听 props 变化并执行业务逻辑，核心是用 watch，但必须写对形式——尤其不能直接传 props.xxx，而要用 getter 函数包裹，否则监听会失效。
基础写法：用箭头函数返回 props 属性
这是最常用、最稳妥的方式，适用于基本类型（String/Number/Boolean）和引用类型（Object/Array），无论父组件是否更换引用地址都有效：
- 在
<script setup></script>中：
<script setup><br>import { watch } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br>const props = defineProps({<br> userId: { type: String },<br> config: { type: Object }<br>})<br><br>// ✅ 正确：用 () => props.userId 创建响应式依赖<br>watch(() => props.userId, (newVal, oldVal) => {<br> console.log('ID变了', oldVal, '→', newVal)<br> fetchUserData(newVal)<br>)<br><br>// ✅ 同样适用于对象<br>watch(() => props.config, (newVal) => {<br> if (newVal) applyConfig(newVal)<br>)<br></script>
需要立即执行？加 immediate: true
如果业务逻辑要在 props 初始值到达时就运行（比如初始化表单、加载默认数据），不能只靠挂载后监听——因为 props 可能在 onMounted 前就已存在。这时启用 immediate：
- 避免漏掉首次值，也避免重复调用
watch(
() => props.data,
(newVal) => {
if (newVal) initForm(newVal)
},
{ immediate: true }
)
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
监听对象内部属性变化（如 user.name）
如果只关心对象某个字段（比如 props.user.name），不要监听整个对象再手动比对——直接监听路径即可：
- 支持点号语法，Vue 会自动建立嵌套依赖
- 无需 deep 选项，性能更好
watch(
() => props.user?.name,
(newName) => {
updateDisplayName(newName)
}
)
注意：哪些写法会失效？
以下两种常见错误会导致监听完全不触发：
-
❌ 直接传 props.xxx：如
watch(props.userId, ...)—— 因为 props 本身不是 ref，Vue 无法追踪其变化 -
❌ 对象未用 getter 且父组件未换引用：如
watch(props.list, ...)，当父组件仅 push 或修改数组元素却不替换整个数组时，该写法不会响应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
