前言
在某些场景下，我们可能需要监听某一地方的结果去修改另一个地方的状态。我们就可以通过使用watch（）函数，来实现状态变化时，触发内部的回调函数。
watch()
在组合式API中，可以如下使用：
<script setup> import { ref, watch } from 'vue' const num = ref(0) // 可以直接侦听一个 ref watch(num, (newValue, oldValue) => { // 执行相应的操作 ... }) </script> <template> <p>{{ num }}</p> </template> 复制代码
当然你也可以监听计算属性、响应式对象或者getter函数，也可以监听多个数据源：
// 多个来源组成的数组 watch([x, () => y.value], ([newX, newY]) => { console.log(`x is ${newX} and y is ${newY}`) }) 复制代码
需要注意的一点是，不能把响应式对象的属性当作监听的数据源：
const math = reactive({ num: 0 }) watch(math.num, (value) => { console.log(`结果是：${value}`) }) 复制代码
如果想要监听的话，需要通过getter函数的形式：
watch( () => math.num, (value) => { console.log(`结果是：${value}`) } ) 复制代码
watchEffect()
熟悉vue2中的 watch 的同学，应该知道他是懒执行的，而vue3中也一样，只有当监听的数据源发生变化的时候，才会执行内部的回调。但是在某些情况下，我们可能需要在监听器创建时，执行一边回调。对于这种情况，我们就可以使用watchEffect()来解决。
const num = ref(0) const busNum = ref(0) function add() { busNum = num + 1 } add() watch(num, add) 复制代码
针对如上的情况，我们就可以通过watchEffect简化。watchEffect会立即执行一百年回调函数，并且自动追踪并分析出响应源。
watchEffect( () => { busNum = num + 1 }) 复制代码
所以说，如上的例子中，回调会立即执行，并且会把num作为监听的数据源，在每次num更新的时候，其内部的回调会再次执行。
watchEffect只会追踪同步代码，并分析数据源。
