vue3 <script setup>监听变量的变化

在 Vue 3 中，可以使用 `<script setup>` 语法来编写组件，这种方式更加简洁和易于理解。要监听变量的变化，可以使用 `watchEffect` 函数，它会自动追踪变量的依赖，并在变量发生变化时执行回调函数。

例如，假设我们有一个名为 `count` 的变量，我们想要在变量发生变化时输出它的值，可以这样写：

<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { watchEffect } from 'vue'

let count = 0

watchEffect(() => {
  console.log(count)
})
</script>

这样，每次 `count` 变化时，控制台都会输出它的值。当然，你也可以在回调函数中执行其他操作，比如更新其他变量或发送网络请求等。