# setup script

<script setup> 是编译时语法糖，它允许使用组合式 API 定义 Vue 选项时提供更简洁和高效的语法。根据 Vue 文档，如果同时使用 SFC 和组合式 API，则建议使用这种语法。

通过使用 <script setup> 块，我们可以将组件逻辑压缩到单个块中，而无需显式的 setup（）函数。要使用 <script setup> 语法，我们只需引入 setup 属性分配给 <script /> 块。

<script setup>
  // ...
</script>

# 无 return 语句

使用 <script setup> 语法，我们不再需要在块的末尾定义 return 语句。在顶层声明的绑定（函数、变量、导入等）在模板中很容易访问和使用。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Username: {{ state.username }}</p>
    <button @click="increment">Increment Count</button>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from "vue";

  const count = ref(0);
  const state = reactive({ username: "John" });

  const increment = () => {
    count.value++;
  };

  onMounted(() => {
    console.log("Component mounted");
  });
</script>

# 没有本地注册的组件

在 <script setup> 块中自动识别和解析组件导入，而无需在 components 选项中显式声明组件。

<template>
  <ButtonComponent />
</template>

<script setup>
  import { ButtonComponent } from "./components/Button";
</script>

# defineProps()

可以使用 defineProps（）函数直接在 <script setup> 块中访问 props。

<template>
  <button>{{ buttonText }}</button>
</template>

<script setup>
  const { buttonText } = defineProps({
    buttonText: String,
  });
</script>

# defineEmits()

与 props 类似，通过在组件中使用 defineEmits（）函数，可以直接在 <script setup> 块中发出自定义事件。

<template>
  <button @click="closeButton">Button Text</button>
</template>

<script setup>
  const emit = defineEmits(["close"]);
  const closeButton = () => emit("close");
</script>