vue3的watch监视多个值的写法

在Vue 3中，可以使用新的`watchEffect`API来监视多个值的变化。`watchEffect`函数接受一个回调函数作为参数，该回调函数会在其依赖的响应式数据发生变化时被调用。

下面是一个示例代码，展示了如何使用`watchEffect`监视多个值的变化：

import { watchEffect, reactive } from 'vue';

const state = reactive({
  value1: 0,
  value2: 0
});

watchEffect(() => {
  console.log('value1:', state.value1);
  console.log('value2:', state.value2);
});

// 修改值会触发watchEffect的回调函数
state.value1 = 1;
state.value2 = 2;

在这个示例中，我们使用`reactive`函数创建了一个响应式对象`state`，包含了两个属性`value1`和`value2`。然后，我们使用`watchEffect`函数来监视这两个属性的变化。当任意一个属性发生变化时，回调函数会被触发，并输出新的属性值。

需要注意的是，`watchEffect`会立即执行一次回调函数，并且会自动追踪其内部使用的所有响应式数据。所以，当我们修改`value1`和`value2`的值时，回调函数会被再次触发，并输出新的属性值。

这就是Vue 3中监视多个值变化的写法。希望能对你有所帮助！

相关问题

vue2 watch 监视2个值

在Vue2中，你可以使用watch来监视两个值。你可以通过设置watch属性来实现这一点。首先，确保被监视的属性必须存在才能进行监视。然后，使用watch属性的第一种配置方法，在Vue实例中设置watch属性，指定要监视的属性和对应的回调函数。当被监视的属性发生变化时，回调函数会自动调用，你可以在回调函数中进行相关操作。这是监视的基本实现方法。另外，Vue还提供了一种简写方式，你可以直接使用vm对象进行监视，而不需要设置watch属性。通过使用这两种监视方法，你可以同时监视两个值的变化。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue的监视属性-watch](https://blog.csdn.net/mantou_riji/article/details/125810280)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

vue3 watch侦听多个值

在Vue 3中，你可以使用`watch`选项来侦听多个值。你可以将要侦听的值作为对象的键，并将对应的回调函数作为值。

下面是一个示例：

watch: {
  value1: function(newVal, oldVal) {
    // 值1发生变化时触发的回调函数
  },
  value2: function(newVal, oldVal) {
    // 值2发生变化时触发的回调函数
  },
  // ...
}

在上面的示例中，`value1`和`value2`是要侦听的值，每当它们发生变化时，相应的回调函数将被调用。

注意：在Vue 3中，`watch`选项已被更强大的`watch`函数所取代。你可以使用`watch`函数来实现更复杂的侦听逻辑。