vue3watch多个属性

在Vue 3中，使用watch来监听一个或多个属性的变化和做出相应的操作非常简单。 如果你想监听多个属性的变化，你可以使用watchEffect或watch来实现。

使用watchEffect:

watchEffect可以监听任何响应式状态的变化，包括其他响应式状态的变化。 在使用watchEffect时，我们可以传递一个函数，这个函数中可以访问到我们想要监听的多个属性。

例如，我们想要同时监听data中的a和b属性：

import { watchEffect } from 'vue'

watchEffect(() => {
  console.log(`a is ${data.a}`)
  console.log(`b is ${data.b}`)
})

使用watch:

如果你想更加明确地指定要监听的属性，可以使用watch。 在使用watch时，我们需要将要监听的属性作为第一个参数传递进去，将响应函数作为第二个参数。 在响应函数中，我们可以访问到当前属性的值和之前的值。

例如，我们想要同时监听data中的a和b属性：

import { watch } from 'vue'

watch([data.a, data.b], ([newValueA, newValueB], [oldValueA, oldValueB]) => {
  console.log(`a changed from ${oldValueA} to ${newValueA}`)
  console.log(`b changed from ${oldValueB} to ${newValueB}`)
})

无论是使用watchEffect还是watch，都可以方便地监听多个属性的变化，以便在发生变化时做出相应的操作。