当我们在Vue 3应用程序中想要监听数据的变化时，可以使用 watch 函数。watch 函数支持多种用法，包括监听响应式对象、计算属性、ref 对象等等。
下面我们就来详细讲解一下 watch 函数的用法。
监听响应式对象
watch 函数可以通过监听一个响应式对象来实现数据的实时更新。例如:
import { reactive, watch } from 'vue' const state = reactive({ count: 0, }) watch( () => state.count, (newCount, oldCount) => { console.log(`count发生了变化：${oldCount} -> ${newCount}`) } ) state.count++ // 输出 "count发生了变化：0 -> 1"
在上面的代码中，我们首先通过 reactive 函数创建了一个响应式对象 state，并定义了一个属性 count。接着，使用 watch 函数来监听 state.count 的变化，当 count 值发生变化时，输出日志信息。
在每次修改 count 值时，会触发 watch 里的回调函数，并输出相应的日志信息。
需要注意的是，当监听的值是一个对象或数组时，只能监听到对象或数组引用的变化，而不能监听到对象或数组内部某个具体属性的变化（这种情况可以使用深度监听）。
监听计算属性
除了监听响应式对象，我们还可以使用 watch 函数来监听计算属性的变化。例如：
import { ref, computed, watch } from 'vue' const count = ref(0) const doubleCount = computed(() => count.value * 2) watch( () => doubleCount.value, (newDoubleCount, oldDoubleCount) => { console.log(`doubleCount发生了变化：${oldDoubleCount} -> ${newDoubleCount}`) } ) count.value++ // 输出 "doubleCount发生了变化：0 -> 2"
在上面的代码中，我们首先创建了一个 ref 类型的变量 count，以及一个计算属性 doubleCount，它是 count 值的两倍。
接着，使用 watch 函数来监听 doubleCount 的变化，并输出日志信息。
当 count 值发生变化时，会触发计算属性 doubleCount 的重新计算，然后再触发 watch 回调函数。
监听多个值
除了监听单个值，我们也可以使用 watch 函数来监听多个数据的变化。例如：
import { ref, watch } from 'vue' const firstName = ref('John') const lastName = ref('Doe') watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => { console.log(`姓名发生了变化：${oldFirstName} ${oldLastName} -> ${newFirstName} ${newLastName}`) }) firstName.value = 'Jane' // 输出 "姓名发生了变化：John Doe -> Jane Doe" lastName.value = 'Smith' // 输出 "姓名发生了变化：Jane Doe -> Jane Smith"
在上面的代码中，我们创建了两个 ref 类型的变量 firstName 和 lastName，并使用 watch 函数来监听它们的变化。当其中任何一个变量发生变化时，输出日志信息。
需要注意的是，在回调函数中，newValues 和 oldValues 分别表示新的和旧的值数组，这些值是按照 watch 函数第一个参数数组的顺序排列的。
监听深度对象
当我们需要监听一个嵌套较深的响应式对象的变化时，可以使用 watch 函数的 deep 选项来实现。例如：
import { reactive, watch } from 'vue' const state = reactive({ user: { name: 'John', age: 30, address: { city: 'Los Angeles', street: '123 Main St', zip: '90001' } } }) watch( () => state, (newState, oldState) => { console.log(`state对象发生了变化`) }, { deep: true } ) state.user.address.city = 'New York' // 输出 "state对象发生了变化"
在上面的代码中，我们创建了一个较为复杂的嵌套响应式对象 `state`，其中包含一个 `user` 对象和一个 `address` 对象。接着，使用 `watch` 函数来监听整个 `state` 对象的变化，并输出日志信息。 需要注意的是，在 `watch` 函数中，如果我们想要监听嵌套对象的变化，则需要设置选项 `{ deep: true }`。这样在每次嵌套对象内部值发生变化时，都会触发回调函数。
小结
在Vue 3中， `watch` 函数提供了丰富的用法，可以用于监听各种类型的数据变化。通过 `watch` 函数，我们可以在数据发生变化时执行一些自定义的操作，从而实现更加灵活的业务逻辑。 需要注意的是，在使用 `watch` 函数时，我们要合理选择监听的目标以及回调函数的执行时机，避免出现性能问题。
希望本篇文章能够对你了解Vue 3中 `watch` 函数有所帮助！
