Vue 3 Setup中如何正确使用watch deep？

什么是Vue 3 Setup中的watch和deep选项呀？

在Vue 3里，setup函数是一个新的组件选项，用来替代Vue 2里的data、computed、methods等一些选项组合的部分功能哦，而watch呢，它的作用就是用来监听数据的变化啦，就好比你一直盯着某个东西，它一变你就能立马知道并且做出相应的反应呢。

那deep选项呢，它是和watch配合使用的哦，当你要监听的是一个对象或者数组这种复杂的数据类型时，如果不设置deep为true，默认情况下watch只会监听到这个对象或者数组的引用变化，啥意思呢？就是说如果你只是修改了对象里面某个属性的值，或者数组里面某个元素的值，它可能就发现不了哦，但是当你把deep设为true，它就会深入到对象或者数组内部，去仔细盯着每个属性、每个元素的变化啦，一旦有任何变动，就能触发你设置好的回调函数哦。

啥时候需要在Vue 3 Setup的watch里用到deep选项呢？

比如说呀,你有一个组件，里面有个对象数据，像这样：

const userInfo = reactive({
  name: '小明',
  age: 18,
  hobbies: ['篮球', '音乐']
});

然后在组件的setup函数里你想监听这个userInfo对象的变化情况，如果只是简单地用watch去监听userInfo，像这样：

watch(userInfo, (newValue, oldValue) => {
  console.log('userInfo变化啦', newValue, oldValue);
});

这时候呢,如果你只是修改了userInfo.name的值，比如改成'小红'，你会发现这个watch的回调函数可能并不会被触发哦，因为默认情况下它只关注userInfo这个对象整体的引用有没有变，而不是里面属性的值变没变。

但要是你希望能准确地知道userInfo里面任何一个属性或者hobbies数组里任何一个元素的变化，那这时候就需要用到deep选项啦，像这样：

watch(userInfo, (newValue, oldValue) => {
  console.log('userInfo变化啦', newValue, oldValue);
}, { deep: true });

这样一来,不管是改了name、age的值，还是在hobbies数组里添加、删除了某个爱好，这个watch的回调函数都会被触发啦，是不是很方便呀。

使用Vue 3 Setup watch deep有啥要注意的地方不？

那可还真有几点要留意的哦。

首先呢,虽然deep能让我们很方便地监听对象和数组内部的变化，但是它也有个小缺点，就是性能方面可能会有点影响哦，因为它要一直深入去检查每个属性、每个元素有没有变呀，所以如果你的对象或者数组特别大、特别复杂，那每次变化都要做这么细致的检查，可能就会让程序运行得稍微慢一点点啦，所以呢，在使用的时候要权衡一下哦，如果不是特别需要精确到每个内部元素的变化监听，能不用deep就尽量不用啦，或者看看能不能通过其他方式来实现类似的需求哦。

还有哦,当你使用deep的时候，在watch的回调函数里，新旧值的对比可能会有点小复杂呢，因为对象或者数组内部一变，整个新值和旧值都是完整的对象或者数组呀，不像只监听简单数据类型那样，新旧值对比很直观，这时候你可能就需要自己写一些逻辑来准确判断到底是哪个属性或者元素发生了变化哦，比如说可以通过遍历对象的属性或者数组的元素，去逐个对比它们的新旧值呀。

另外呀,要记得watch在setup函数里使用的时候，它的第一个参数除了可以直接传要监听的数据，还可以传一个函数哦，这个函数返回要监听的数据，这样做有时候能让我们的代码更灵活呢，特别是当我们要根据一些条件来动态确定监听的数据的时候，而且不管是直接传数据还是传函数返回数据，要使用deep选项的设置方式都是一样的，就是在第三个参数对象里设置deep为true啦。

能不能给个完整的Vue 3 Setup里使用watch deep的小例子呀？

当然可以啦,下面就给你个完整的小例子哦。

假设我们有个组件,用来展示用户的一些信息，并且要实时监听用户信息的变化呢。

<template>
  <div>
    <p>姓名：{{ userInfo.name }}</p>
    <p>年龄：{{ userInfo.age }}</p>
    <p>爱好：{{ userInfo.hobbies.join(', ') }}</p>
    <button @click="changeUserInfo">修改用户信息</button>
  </div>
</template>
<script>
import { reactive, watch } from 'vue';
export default {
  setup() {
    const userInfo = reactive({
      name: '小明',
      age: 18,
      hobbies: ['篮球', '音乐']
    });
    const changeUserInfo = () => {
      // 修改用户信息
      userInfo.name = '小红';
      userInfo.age = 20;
      userInfo.hobbies.push('读书');
    };
    watch(userInfo, (newValue, oldValue) => {
      console.log('用户信息发生变化啦：');
      console.log('新值：', newValue);
      console.log('旧值：', oldValue);
    }, { deep: true });
    return {
      userInfo,
      changeUserInfo
    };
  }
};
</script>

在这个例子里呀,我们首先在setup函数里定义了一个reactive的userInfo对象，然后有个changeUserInfo函数用来修改这个对象的信息，接着我们用watch去监听userInfo，并且设置了deep为true，这样一来，当我们点击那个“修改用户信息”的按钮，修改了userInfo里面的任何信息后，就能在控制台看到关于用户信息新旧值的详细对比啦，是不是很清楚呀。

好啦,关于Vue 3 Setup中watch的deep选项就给你介绍到这儿啦，希望能帮你更好地理解和使用它哦。