<script setup>语法使Vue组件代码更简洁连贯：响应式状态、逻辑函数、生命周期钩子等按功能聚类声明，无需return或组件注册；ref/reactive定义状态，onMounted触发加载，模板中自动解包ref变量。
直接在 <script setup> 里按逻辑块组织代码，不用 return、不用注册组件、不用手动暴露变量——写法更接近普通 JS，读起来也更连贯。
把相关逻辑聚在一起
比如“用户信息加载”这个功能，数据声明、请求函数、加载状态、错误处理全放在一块，避免分散在 data、methods、mounted 等不同区域。
- 用
ref或reactive定义响应式状态（如user、loading、error） - 定义
fetchUser函数，内部更新这些状态 - 用
onMounted触发首次加载，或用watch监听参数变化
按类型分组声明，保持可读性
顶部集中导入，接着依次写响应式数据、计算属性、副作用逻辑、事件函数，结构清晰，协作时别人一眼能定位到某类代码。
- 导入统一放在最前面：
import { ref, reactive, onMounted, computed } from 'vue' - 响应式变量紧随其后：
const list = ref([])、const form = reactive({ name: '' }) - 计算属性和监听器写在中间：
const filteredList = computed(() => ...) - 业务函数和事件处理器放最后：
function handleSubmit() { ... }
组件和指令自动可用
不需要 components 选项注册子组件，也不用 directives 注册指令——只要 import 进来，顶层声明就能直接在模板中使用。
立即学习“前端免费学习笔记（深入）”；
- 导入并命名组件：
import UserCard from './UserCard.vue'→ 模板中直接写<UserCard /> - 本地指令命名需带
v前缀：const vFocus = { mounted(el) { el.focus() } }→ 模板中用v-focus - 全局指令（如
v-loading）照常使用，无需额外操作
模板里用法更自然
ref 类型变量在模板中自动解包，{{ count }} 就行，不用写 {{ count.value }}；函数调用、插值表达式、指令绑定都和普通变量一样直觉。
-
ref(0)在模板中直接参与运算：@click="count++"、{{ count + 1 }} - 导入的工具函数（如
formatDate）可直接在插值中调用：{{ formatDate(item.time) }} - DOM 引用也简化了：
<input ref="inputRef" />，然后const inputRef = ref(null)
