下面是详细讲解：

一文搞懂Vue3中watchEffect侦听器的使用

简介

在Vue3中，watchEffect是一个侦听器函数，它接收一个响应式数据对象，并在该对象发生变化时执行指定的callback函数。相比于Vue2的watch，它是基于响应式数据的，不需要指定要侦听的属性名，当数据变化时立刻执行回调。watchEffect的使用可以让你更加灵活地监听数据，让你的程序响应式更加高效。

基本用法

可以通过watchEffect函数来创建一个侦听器，创建方式如下：

watchEffect(effect: () => any, options?: WatchEffectOptions): StopHandle

其中，effect是指要侦听的函数，options是一个配置对象，用来配置侦听器的一些行为，例如deep用来指定是否深度遍历整个对象，默认为false。函数返回一个StopHandle对象，可以使用它来停止侦听器的执行。

下面是一个简单的示例：

import {reactive, watchEffect} from 'vue'

const state = reactive({
  count: 1,
  double: 2,
})

watchEffect(() => {
  state.double = state.count * 2
})

上面的示例中，我们在state对象上定义了两个属性，count和double。然后通过watchEffect函数来监视count属性的变化，并在变化时计算出double属性的值。当count的值变化时，watchEffect会自动执行传入的函数。

示例1：打印出变化的属性和新值

下面是一个更加复杂的示例，它会在侦听的过程中，打印出变化的属性名和新值：

import {reactive, watchEffect} from 'vue'

const state = reactive({
  count: 1,
  double: 2,
})

watchEffect(() => {
  console.log('count is now', state.count)
  console.log('double is now', state.double)
})

在上面的示例中，当count属性发生变化时，会输出类似count is now 2这样的信息，并打印出新的值。

示例2：深度侦听

在默认情况下，watchEffect是浅侦听的，当对象的属性的值发生变化时，会触发回调函数。如果需要深度遍历整个对象来进行侦听，可以使用deep选项，示例如下：

import {reactive, watchEffect} from 'vue'

const state = reactive({
  person: {
    name: 'Bob',
    age: {
      value: 18
    }
  },
  double: 2,
})

watchEffect(() => {
  console.log('person.age.value is now', state.person.age.value)
}, { deep: true })

在上面的示例中，我们定义了一个名为person的对象，在它的age属性值的对象里定义了一个名为value的属性。由于deep选项指定为true，因此当person.age.value的值发生变化时，会触发回调函数，并输出类似person.age.value is now 19这样的信息。

结论

watchEffect是一个非常强大的响应式侦听器，它可以让我们更加灵活地监听数据变化，实现响应式的程序设计。 我们可以使用它来监听观察响应式数据变化，从而在数据发生变化时做出一些响应。