Vue 3 中 如何定义变量

在Vue 3中，定义变量通常是在组件的`<script setup>`部分进行的。`<script setup>`是一个语法糖，它可以让使用Vue 3的Composition API时的代码更加简洁。在`<script setup>`中，你可以使用`let`、`const`来定义响应式变量，也可以使用`ref`、`reactive`等函数来创建响应式数据。

使用`let`或`const`定义变量时，这些变量会直接成为组件实例的属性，并且会自动具备响应式能力。此外，你可以使用`ref`和`reactive`等函数来定义更复杂的响应式状态。

下面是一个使用`<script setup>`定义变量的例子：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

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

// 定义一个响应式引用
const count = ref(0)

// 定义一个函数来修改响应式变量
function increment() {
  count.value++
}
</script>

在这个例子中，`count`是一个响应式的引用（reference），通过`.value`属性来修改它的值。当`count`的值发生变化时，依赖于它的模板部分也会自动更新。