全书目录

第三篇：Vue 完全指南 —— 新城区商业街宇宙

第三章：`<script setup>` —— 官方推荐的开店方式

1 分钟 119 字 第 73 / 962 个阅读单元

截至 2026-03-28，Vue 官方快速上手生成的新项目示例仍然默认使用 组合式 API + <script setup>。

vue
<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

为什么官方更推荐它？

  • 样板代码更少
  • TypeScript 支持更顺
  • 性能和 IDE 推导更好
  • 心智模型更统一