在 Vue 3 中，如何正确监听 props 属性的变化？

Question

在 Vue 3 中，如何正确监听 props 属性的变化？这是开发组件时常见的问题。由于 props 是单向数据流，直接在模板中使用响应式并不触发更新。常见的错误是试图用 `watch` 监听整个 props 对象。正确的做法是对具体某个 prop 使用 `watch`，或使用 `computed` 属性提取值进行监听。此外，在使用 `<script></script>

Answer 1

一、Vue 3 中监听 props 的基础概念

在 Vue 3 中，props 是组件间通信的核心机制之一。由于其遵循单向数据流的设计原则，父组件传入的 prop 不应被子组件直接修改。

然而，在开发过程中，我们常常需要监听 prop 的变化以执行某些副作用逻辑（如请求数据、更新本地状态等）。

• props 是只读的
• 使用 watch 监听具体属性而非整个对象
• 配合 computed 提取值进行监听也是一种常见做法

二、错误的监听方式与问题分析

很多开发者会尝试通过如下方式监听整个 props 对象：

watch(props, (newVal) => {
  console.log('props changed', newVal);
});
  

但这种方式往往不会触发预期的行为，原因在于：

1. props 是响应式代理对象，浅层变更无法被捕获
2. Vue 的响应式系统对对象引用变化更敏感，而对内部属性变化不总是触发 watch

三、正确的监听方法详解

以下是推荐的监听方式：

方式	适用场景	代码示例
watch + 具体 prop	监听某个特定 prop 的变化	watch(() => props.name, (newVal, oldVal) => { console.log('name changed:', newVal); });
computed + watch	需要基于多个 prop 计算后再监听	const fullName = computed(() => props.firstName + ' ' + props.lastName); watch(fullName, (newVal) => { console.log('Full name changed:', newVal); });

四、使用 <script setup> 语法时的注意事项

在 Vue 3 的 Composition API 中，使用 <script setup> 需要配合 defineProps 声明 props。

以下是一个典型的写法：

import { watch } from 'vue';

const props = defineProps(['name']);

watch(() => props.name, (newVal) => {
  console.log('name changed in script setup:', newVal);
});
  

注意：不能直接解构 props，因为解构后的变量会失去响应性。

五、流程图展示监听逻辑

以下为监听 props 变化的流程示意：

graph TD
  A[定义 props] --> B{是否为复杂监听?}
  B -->|否| C[直接使用 watch(prop)]
  B -->|是| D[使用 computed 提取计算值]
  D --> E[再用 watch 监听 computed 值]
  C --> F[执行副作用逻辑]
  E --> F
  

六、进阶技巧与最佳实践

除了基本的监听方式外，还有一些高级用法值得掌握：

• 使用 deep: true 深度监听嵌套对象（谨慎使用）
• 结合 onMounted 和初始值处理
• 避免在 watch 内部频繁修改其他响应式状态导致循环依赖

例如深度监听一个对象型 prop：

watch(() => props.user, (newUser) => {
  console.log('user object changed', newUser);
}, { deep: true });