watch监听props的值

要监听 Vue 组件中 props 的值，可以使用 `watch` 属性。在组件中添加一个 `watch` 对象，然后添加需要监听的 prop，当该 prop 的值发生变化时，会触发 watch 中对应的函数。

例如，我们有一个组件 `MyComponent`，其中有一个 `prop` 叫做 `myProp`，我们可以这样监听它的变化：

Vue.component('MyComponent', {
  props: {
    myProp: {
      type: String,
      default: ''
    }
  },
  watch: {
    myProp: function(newVal, oldVal) {
      console.log('myProp changed from', oldVal, 'to', newVal);
    }
  }
});

在上面的代码中，我们定义了一个 `watch` 对象，监听了 `myProp` prop 的变化。当 `myProp` 的值发生变化时，会触发 `myProp` 对应的函数，并打印出新旧值。

需要注意的是，由于 `props` 是单向数据流，组件内部不能直接修改 `props` 的值。如果需要修改 `props` 的值，应该通过触发事件来通知父组件修改。

相关问题

watch 监听props

### 使用 `watch` 监听 Props 变化

在 Vue.js 中，可以通过 `watch` 选项来监听来自父组件传递给子组件的 props 数据变化。对于简单类型的 prop（如字符串、数字等），默认情况下可以直接监听到变化；但对于复杂类型的数据结构（如对象或数组），则可能需要额外配置。

#### 基本语法
当希望监听整个 props 对象时，在子组件内定义如下形式：

export default {
    props: ['dataList'],
    watch: {
        dataList(newVal, oldVal) {
            console.log('监听引用类型数据dataList');
            console.log('new:', newVal);
            console.log('old:', oldVal);
        }
    }
}

此方法适用于监听单个 prop 的改变[^1]。

#### 处理深层次嵌套的对象属性变更
如果目标是检测对象内部更深层级的变化，则需启用深度监听模式。此时应调整为以下方式实现：

export default {
    props: ['obj'],
    watch: {
        obj: {
            handler(newValue) {
                console.log(newValue, 'newValue obj');
            },
            deep: true // 启用深比较机制
        }
    }
}

需要注意的是，默认情况下即使启用了 `deep:true` ，某些场景下仍可能出现无法捕捉新添或移除字段的情况。针对这种情况可采取措施更新整个对象实例以确保能够被侦测到变动[^2]。

#### Vue 3 Composition API 下的做法
在 Vue 3 中采用 setup 函数作为入口点的情况下，推荐利用 `toRefs()` 或者单独使用 `toRef()` 方法来进行更加细粒度的操作。具体做法如下所示：

import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";

export default defineComponent({
    name: "ChildComponent",
    props: ["user"],
    setup(props) {
        const userProps = toRefs(props);

        watch(
            () => userProps.user.value,
            (newUserValue) => {
                console.log(newUserValue); // 当前最新的 user 属性值
            },
            { immediate: true, deep: true }
        );

        return {};
    }
});

这里展示了如何借助 `toRefs()` 将传入的 props 转换成独立的响应式引用，并对其指定部分实施监视逻辑[^3]。

vue watch监听 props

在Vue中，可以使用watch选项来监听props的变化。通过在组件中定义一个watch对象，然后在该对象中定义与props名称相同的属性，即可实现props的监听。当props的值发生变化时，watch对象中对应的属性的处理函数会被触发。

例如，假设有一个组件的props为config，在watch对象中定义一个与props名称相同的属性：

watch: {
config(newVal, oldVal) {
// 处理函数
console.log(newVal, oldVal);
}
}

当config的值发生变化时，处理函数将被调用，并且会传入新值和旧值作为参数。