watchEffect监听两个值

watchEffect函数是Vue 3中的一个API，用于监听响应式数据的变化并执行相应的副作用函数。它可以同时监听多个值的变化。

下面是一个示例代码，演示了如何使用watchEffect监听两个值的变化：

import { watchEffect, reactive } from 'vue'

const data = reactive({
  value1: 10,
  value2: 20
})

watchEffect(() => {
  console.log(`value1: ${data.value1}, value2: ${data.value2}`)
})

// 修改值
data.value1 = 30
data.value2 = 40

在上面的代码中，我们使用`reactive`函数创建了一个响应式对象`data`，其中包含了两个属性`value1`和`value2`。然后，我们使用`watchEffect`函数来监听这两个值的变化，并在变化时执行副作用函数。在副作用函数中，我们简单地将两个值打印到控制台。

当我们修改`value1`和`value2`的值时，`watchEffect`会自动触发副作用函数，并打印出新的值。

相关问题

watchEffect监听2个值

可以在 `watchEffect` 的回调函数中同时监听多个值，只需要将需要监听的值作为回调函数的依赖项即可。下面是一个监听 `msg` 和 `msg2` 两个值的例子：

import { watchEffect, ref } from 'vue'

const msg = ref('梅西')
const msg2 = ref('内马尔')

watchEffect(() => {
  console.log('msg的值:', msg.value)
  console.log('msg2的值:', msg2.value)
})

在上面的例子中，我们使用了 `ref` 函数创建了两个响应式变量 `msg` 和 `msg2`，然后在 `watchEffect` 的回调函数中同时监听了这两个变量。当 `msg` 或 `msg2` 的值发生变化时，回调函数就会被触发。

watchEffect 获取旧值和新值

在Vue3中，watchEffect是一个响应式API，用于监听响应式数据的变化，并在回调函数中执行相应的操作。当响应式数据发生改变时，watchEffect函数会自动重新执行回调函数。

在watchEffect回调函数中，你可以访问到响应式数据的旧值和新值。Vue3提供了两种方法来获取旧值和新值：

1. 使用传统的参数形式：回调函数中传入两个参数：新值和旧值。
例如：watchEffect(() => {
// 在这里访问新值和旧值
})

2. 使用ref函数创建一个引用对象：ref函数可以创建一个响应式数据的引用对象，通过引用对象的value属性，可以访问到响应式数据的旧值和新值。
例如：const data = ref(0);
watchEffect(() => {
const oldValue = data.value;
// 在这里访问旧值
data.value++;
const newValue = data.value;
// 在这里访问新值
})