Vue 3 script setup中如何正确使用watch？

什么是Vue 3 script setup中的watch呀？

在Vue 3的script setup语法糖里呀，watch可是个挺重要的功能呢，它主要是用来监听数据的变化哦，比如说，你有一个响应式的数据，可能是个变量呀，或者是某个组件的props之类的，当这个数据的值发生改变的时候，watch就能察觉到这个变化，然后让你可以去执行一些特定的操作呢，就好比你在盯着一个东西，只要它一有动静，你就可以立马做出反应,watch在Vue里就起到这么个作用啦。

怎么在script setup里定义一个简单的watch呢？

下面就来看看具体咋做哦，首先呢，在你的script setup里面，假设你有一个响应式的数据叫count,它可能是这样定义的：

<script setup>
import { ref } from 'vue';
const count = ref(0);
// 这里定义watch
watch(count, (newValue, oldValue) => {
  console.log(`count的值从${oldValue}变成了${newValue}`);
});
</script>

在上面的代码里呀，我们先用ref创建了一个叫count的响应式数据，初始值是0哦，然后呢，通过watch函数来监听它的变化，watch函数接收两个参数，第一个就是你要监听的那个响应式数据，这里就是count啦，第二个参数呢，是一个回调函数，当count的值发生变化的时候，这个回调函数就会被执行哦，在这个回调函数里呀，它会接收到两个参数，newValue就是count变化后的新值，oldValue就是count变化前的旧值啦,这样我们就能在控制台打印出count具体是怎么变的啦。

那能不能监听多个数据的变化呀？

当然可以啦！要是你想同时监听好几个数据的变化情况呢，也是有办法的哦，比如说，你还有另外一个响应式数据叫name,定义可能像这样：

<script setup>
import { ref } from 'vue';
const count = ref(0);
const name = ref('小明');
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(`count的值从${oldCount}变成了${newCount}，name的值从${oldName}变成了${newName}`);
});
</script>

这里呢，我们把要监听的count和name放在一个数组里传给watch函数哦，然后在回调函数里呀，对应的参数也变成了数组的形式啦，这样就能分别拿到count和name变化后的新值和变化前的旧值,然后可以根据需要在控制台或者做其他的操作来处理它们的变化情况呢。

有没有办法只在特定条件下才去监听数据变化呀？

有的哦，有时候我们可能不想每次数据一变就去执行那个监听的操作，而是希望满足一定条件的时候才去管它的变化呢，这时候就可以用到watch的第三个参数啦，它是一个配置对象哦，比如说，我们只想在count的值大于5的时候才去监听它的变化,代码可以写成这样：

<script setup>
import { ref } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`count的值从${oldValue}变成了${newValue}`);
}, {
  immediate: false,
  deep: true,
  flush: 'post',
  // 这里添加条件判断
  when: () => count.value > 5
});
</script>

在这个配置对象里呀，我们设置了几个属性哦，immediate如果设为false，就表示不会在一开始就立刻执行一次监听回调函数啦（默认是true哦，会先执行一次的），deep设为true呢，表示如果监听的是对象类型的数据，会深度监听它里面的属性变化哦，flush设为'post'，一般是和异步操作相关啦，这里先不多说啦，重点是那个when属性哦，它是一个函数，当这个函数返回true的时候，也就是这里count的值大于5的时候,才会去执行那个监听count变化的回调函数呢。

要是监听的是对象里面的某个属性变化呢？

要是你监听的是一个对象里面的某个属性的变化呀，也是有办法的哦，假设你有一个对象叫user，里面有个属性叫age,定义可能是这样：

<script setup>
import { reactive } from 'vue';
const user = reactive({
  age: 18
});
// 这里监听user对象里age属性的变化
watch(() => user.age, (newValue, oldValue) => {
  console.log(`user的age属性的值从${oldValue}变成了${newValue}`);
});
</script>

这里呢，我们不能直接把user传给watch去监听age属性的变化哦，而是要通过一个函数的形式，返回user.age这个属性值，这样watch就能准确地监听到age这个属性的单独变化啦,然后回调函数里也能正常拿到新值和旧值去做相应的处理咯。

好啦，以上就是关于Vue 3 script setup里watch的一些常见用法和注意事项啦，希望能帮助你更好地在Vue 3项目里运用这个好用的功能哦！