vue3 watch监听多个

在Vue 3中，如果你想在一个`watch`块中监听并处理多个变量的变化，你可以直接在回调函数中声明这些变量作为参数或者通过解构赋值来访问它们。例如：

setup() {
  let count = ref(0);
  let text = ref('');

  const handleChanges = ({ count: newCount, text: newText }) => {
    console.log('count changed:', newCount);
    console.log('text changed:', newText);
    
    // 更新其他逻辑...
  };

  watch([count, text], handleChanges);

  // 使用方式
  count.value++;
  text.value = 'New Text';
}

在这个例子中，`handleChanges`函数接收一个对象，包含了`count`和`text`的新值。这样，当你修改这两个变量时，`handleChanges`都会被执行。你也可以根据需要选择在对象中给每个变量单独命名，如下：

watch({
  count(newCount) {
    console.log('count changed:', newCount);
  },
  text(newText) {
    console.log('text changed:', newText);
  }
}, () => {
  // 如果你想同时处理两个属性，这里不需要传入新的值
});

在使用`watch`时，记得它会在组件渲染时初始化，所以在`setup`函数中定义并注册`watch`，并在适当的地方更新变量，以便监听其变化。同时，`watch`会监控所有依赖的变量，所以只要这些变量有所改变，就会触发回调。