vue3的watch监听多个变量

Vue3中的`watch`函数可以让你在一个对象上监听任意深度的属性变化，并在它们发生改变时执行回调函数。如果你想监听多个变量，你可以这样做：

let obj = {
  prop1: '初始值',
  prop2: '初始值',
  // 更多的属性...
};

const watchMultiProps = (obj) => {
  Object.keys(obj).forEach((key) => {
    Vue.watched.$watch(key, function (newVal, oldVal) {
      console.log(`属性 ${key} 的值已从 ${oldVal} 变为 ${newVal}`);
      // 这里可以添加你需要处理新旧值的逻辑
    });
  });
};

// 初始化监听
watchMultiProps(obj);

// 当prop1或prop2等任一属性更新时，都会触发回调
obj.prop1 = '新值';
obj.prop2 = '新值';

在这个例子中，`watchMultiProps`函数遍历了`obj`的所有键，并为每个属性创建了一个独立的`watch`监听。当这些属性的值发生变化时，相应的回调会被调用。

相关问题

vue2watch监听多个变量

在Vue2中，watch本身无法直接监听多个变量。但是我们可以通过计算属性返回一个包含需要监听的多个变量的对象，然后再监听这个对象来实现"监听多个变量"的效果。具体的代码如下所示：

export default {
  data() {
    return {
      msg1: 'apple',
      msg2: 'banana'
    }
  },
  computed: {
    msgObj() {
      const { msg1, msg2 } = this
      return { msg1, msg2 }
    }
  },
  watch: {
    msgObj: {
      handler(newVal, oldVal) {
        if (newVal.msg1 !== oldVal.msg1) {
          console.log('msg1 has changed')
        }
        if (newVal.msg2 !== oldVal.msg2) {
          console.log('msg2 has changed')
        }
      },
      deep: true
    }
  }
}

在上述代码中，我们通过计算属性`msgObj`返回一个包含`msg1`和`msg2`的对象。然后在`watch`选项中监听`msgObj`，并在`handler`中判断`msg1`和`msg2`的变化情况进行相应的处理。通过设置`deep: true`来深度监听对象的变化。

这样，当`msg1`或`msg2`发生变化时，就会触发相应的处理逻辑。
#### 引用[.reference_title]
- *1* [VUE的watch监听多个变量](https://blog.csdn.net/CSDN877425287/article/details/115709040)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue watch监听多个数据](https://blog.csdn.net/weixin_51033461/article/details/128728364)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

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`会监控所有依赖的变量，所以只要这些变量有所改变，就会触发回调。