vue3中watch的应用场景

在Vue 3中，watch函数用于监听响应式数据的变化并执行回调函数。它可以应用于多种场景，例如：

1. 监听单个响应式数据的变化：

const person = reactive({ name: 'dx', age: 18 })

watch(person, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

上述代码中，当`person`对象的任何属性发生变化时，回调函数将被触发，并且会传入新值和旧值作为参数。

2. 监听多个响应式数据的变化：

const person = reactive({ name: 'dx', age: 18 })
const address = reactive({ city: 'Beijing', country: 'China' })

watch([person, address], ([newPerson, newAddress], [oldPerson, oldAddress]) => {
  console.log(newPerson, newAddress, oldPerson, oldAddress)
})

上述代码中，当`person`对象或`address`对象的任何属性发生变化时，回调函数将被触发，并且会传入新值和旧值作为参数。

3. 配置immediate和deep watch：

const person = reactive({ name: 'dx', age: 18 })

watch(person, (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, { immediate: true })

上述代码中，回调函数将在watch函数被调用时立即执行一次，而不需要等待数据的变化。另外，如果将`deep`选项设置为`true`，则会深度监听对象内部属性的变化。

总结来说，Vue 3中的watch函数可以应用于各种场景，用于监听响应式数据的变化并执行相应的操作。