Vue3 Setup中如何正确使用Watch监听Props？

为什么要在Vue3 Setup中用Watch监听Props呢？

在Vue3的组件开发中，Props是用于父组件向子组件传递数据的重要方式，有时候呢，我们需要在子组件中对传入的Props数据的变化做出响应，这时候就需要用到Watch来监听啦，比如说，父组件传递过来一个用户的信息对象作为Prop，当这个用户信息在父组件那边发生了更新（比如用户名改了呀，用户的年龄变了等等情况），子组件可能需要根据新的用户信息来重新渲染一部分UI或者执行一些相关的业务逻辑,那通过Watch监听Props就能很好地捕捉到这些变化并做出相应处理哦。

在Vue3 Setup中怎么用Watch监听单个Prop呢？

首先呢，在Vue3的Setup函数里面，我们可以这样来监听单个Prop哦，假设我们有一个子组件，它接收一个名为 message 的Prop,那在Setup函数里可以这样写：

import { watch, ref } from 'vue';
export default {
  props: {
    message: String
  },
  setup(props) {
    const localMessage = ref(props.message);
    watch(() => props.message, (newValue, oldValue) => {
      localMessage.value = newValue;
      console.log(`Message changed from ${oldValue} to ${newValue}`);
    });
    return {
      localMessage
    };
  }
};

这里呢，我们先把传入的 props.message 赋值给一个本地的响应式数据 localMessage，这样做是为了方便在组件的其他地方使用这个数据哦，而且它能随着 props.message 的变化而更新，然后通过 watch 函数，我们传入一个函数，这个函数返回要监听的 props.message，当 props.message 发生变化时，就会执行后面的回调函数啦，在回调函数里我们可以更新 localMessage 的值,还能做一些比如打印变化信息之类的操作呢。

那要是想监听多个Props呢？

如果要监听多个Props呀，其实思路也差不多哦，比如说我们的组件接收了两个Props，一个是 name，一个是 age,那在Setup函数里可以这样来监听它们哦：

import { watch, ref } from 'vue';
export default {
  props: {
    name: String,
    age: Number
  },
  setup(props) {
    const localName = ref(props.name);
    const localAge = ref(props.age);
    watch([() => props.name, () => props.age], ([newName, newAge], [oldName, oldAge]) => {
      localName.value = newName;
      localAge.value = newAge;
      console.log(`Name changed from ${oldName} to ${newName}, Age changed from ${oldAge} to ${newAge}`);
    });
    return {
      localName,
      localAge
    };
  }
};

这里呢，我们把要监听的多个Props对应的函数放到一个数组里传给 watch 函数哦，然后在回调函数里，就能分别获取到每个Prop的新值和旧值啦，并且可以像上面那样对本地的响应式数据进行更新,同时也能做一些相关的处理哦。

有没有什么需要注意的点呀？

那可不少注意点呢，首先呀，在Vue3的Setup函数里用Watch监听Props的时候，要注意不要直接修改Props的值哦，因为Props是单向数据流，是从父组件传递过来的，子组件不应该直接去修改它，所以我们才会像上面那样，把Props的值赋给本地的响应式数据,然后通过修改本地数据来达到我们想要的效果呢。

还有哦，如果你的Props是一个对象或者数组类型的，那在监听的时候可能会遇到一些“坑”哦，因为默认情况下，Vue的响应式系统对于对象和数组的一些深层次的属性变化可能不会很好地触发Watch的回调函数，比如说，一个对象Prop里面的某个嵌套属性发生了变化，可能Watch就没察觉到，这时候呀，你可能需要使用一些深度监听的技巧哦，比如可以给 watch 函数传入一个配置对象，设置 deep: true,就像这样：

import { watch, ref } from 'vue';
export default {
  props: {
    userInfo: Object
  },
  setup(props) {
    const localUserInfo = ref(props.userInfo);
    watch(() => props.userInfo, (newValue, oldValue) => {
      localUserInfo.value = newValue;
      console.log(`UserInfo changed from ${oldValue} to ${newValue}`);
    }, {
      deep: true
    });
    return {
      localUserInfo
    };
  }
};

这样设置了 deep: true 之后呢，就能更全面地监听对象Prop里面各个属性的变化啦，不过要注意哦，深度监听可能会带来一些性能上的开销，所以如果不是特别必要,还是要谨慎使用呀。

通过上面这些介绍呀，相信你对在Vue3 Setup中怎么用Watch监听Props已经有了比较清楚的了解啦,在实际开发中就可以根据具体的需求灵活运用哦。