uniapp vue3 setup 语法糖

Vue3 中的 Composition API 是一个全新的 API，与 Vue2 中的 Options API 相比，它提供了更灵活和可组合的方式来组织和重用代码。而在 Uni-app 中，使用 Vue3 的 Composition API，可以通过使用 `<script setup>` 语法糖来简化代码。

在 Vue3 中，`<script setup>` 语法糖可以让我们在一个单独的 `<script>` 标签中同时使用 Options API 和 Composition API。这种写法不需要手动导入和声明响应式数据，也不需要手动处理生命周期钩子函数。

下面是一个示例：

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

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

// 使用 ref 创建响应式变量
const count = ref(0);

// 定义增加 count 的方法
function increment() {
  count.value++;
}
</script>

在上面的例子中，我们使用了 `<script setup>` 来设置脚本部分。我们可以直接在其中导入 `ref` 函数，并使用它来创建响应式的 `count` 变量。然后我们定义了 `increment` 方法来增加 `count` 的值，并在模板中使用它。

通过使用 `<script setup>` 语法糖，我们可以更加简洁地使用 Composition API，使得代码更易读和维护。