vue3侦听watcheffect

Vue3中的watchEffect是一个侦听器函数，它会自动追踪其内部使用的响应式数据，并在数据变化时重新运行其函数体。与Vue2中的watch不同，watchEffect不需要显式地指定要侦听的数据，而是自动追踪其内部使用的所有响应式数据。watchEffect的函数体中可以包含任何响应式数据的读取和操作，这些操作都会被自动追踪并触发函数的重新运行。watchEffect函数返回一个停止追踪的函数，可以在组件卸载时手动调用以停止追踪。

下面是一个使用watchEffect的例子：

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watchEffect(() => {
      console.log(`count is ${count.value}`)
    })

    return {
      count
    }
  }
}

在上面的例子中，我们使用watchEffect侦听count的变化，并在控制台输出count的值。当count的值发生变化时，watchEffect函数会自动重新运行，并输出新的count值。