vue3watch多个

在 Vue 3 中，你可以使用 `watch` 函数来观察多个响应式属性的变化。`watch` 函数接受一个要观察的具体属性或一个包含多个属性的数组，以及一个回调函数。

以下是在 Vue 3 中使用 `watch` 函数观察多个属性的示例：

import { watch, reactive } from 'vue';

const app = {
  setup() {
    const state = reactive({
      count1: 0,
      count2: 0
    });

    watch([() => state.count1, () => state.count2], ([newCount1, newCount2], [oldCount1, oldCount2]) => {
      console.log(`count1 changed from ${oldCount1} to ${newCount1}`);      console.log(`count2 changed from ${oldCount2} to ${newCount2}`);
    });

    return {
      state
    };
  }
};

// 在组件或应用中使用 app.setup() 初始化

在上面的例子中，我们创建了一个名为 `app` 的对象，它包含了 `setup` 方法。在 `setup` 方法中，我们使用 `reactive` 函数创建了一个响应式的 `state` 对象，并定义了两个属性 `count1` 和 `count2`。

然后，我们使用 `watch` 函数来观察 `count1` 和 `count2` 属性的变化。注意传递给 `watch` 函数的第一个参数是一个包含两个箭头函数的数组，每个箭头函数返回对应属性的值。第二个参数是一个回调函数，它接收两个参数：新的属性值和旧的属性值。

当 `count1` 或 `count2` 的值发生变化时，回调函数会被触发，并打印出属性的变化信息。

请注意，以上示例是在 Vue 3 中使用 Composition API 来定义组件的，如果你使用的是 Vue 2，请使用 `Vue.watch` 方法来观察多个属性的变化。