watchEffect监听对象

watchEffect是Vue3中的一个响应式API，可以监听响应式对象的变化，当对象发生变化时，会自动执行指定的回调函数。在Vue3中，watchEffect主要用于监听数据变化，并执行副作用代码，从而使得UI界面可以随着数据的变化而自动更新。

watchEffect的用法如下：

import { watchEffect } from 'vue'

watchEffect(() => {
  // 这里是需要监听的响应式对象的getter方法
  console.log('object has changed')
})

在上面的例子中，我们使用了watchEffect来监听一个响应式对象，并在对象发生变化时打印出一条信息。需要注意的是，watchEffect内部会自动将所监听的响应式对象进行依赖收集，并在对象发生变化时重新执行回调函数。

相关问题

watchEffect 监听不了数组

watchEffect 监听不了数组，因为 watchEffect 只能监听响应式对象的变化。而数组虽然也是响应式的，但是其内部的元素是非响应式的，当数组发生变化时，只有 Array 对象本身会触发响应式更新，而不会触发数组内部元素的更新。

如果需要监听数组的变化，可以使用 watch 或者 watchCollection，它们可以监听数组的变化并触发回调函数执行。另外，Vue 3.1.0 之后的版本提供了一个新的 API：reactive()，它可以将数组转换成响应式的对象，从而可以使用 watchEffect 监听数组的变化。例如：

import { reactive, watchEffect } from 'vue'

const arr = reactive([1, 2, 3])

watchEffect(() => {
  console.log(arr)
})

arr.push(4) // 输出 [1, 2, 3, 4]

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`会自动触发副作用函数，并打印出新的值。