[前端|vue] ＜script setup＞ 语法简介（笔记）

<script setup> 语法在 Vue 3 中引入，它提供了一种更简洁的方式来组织和编写组件的逻辑。以下是使用 <script setup> 的一些主要优点：

1. 简化的语法：

   (1) 更少的样板代码：不需要显式声明 data, props, methods, computed 等。

   (2) 直接在 setup 函数中声明变量和方法，它们自动在模板中可用。

   (3) 自动注入 props 和 emit 函数。

2. 类型检查集成：

   (1) 使用 TypeScript 时，可以直接在 setup 函数中声明类型，提供更好的类型检查。

   (2) 可以利用 ref 和 reactive 创建响应式数据，类型系统会自动推断。

3. 组合式 API 集成：

   (1) setup 函数可以与 Vue 的组合式 API完美融合，如 useXXX 插件和自定义的组合函数。

   (2) 更容易理解和维护复杂的组件逻辑。

4. 更好的性能：

   由于编译时的优化，setup 语法糖可以减少运行时的开销。

5. 更好的工具链支持：
   IDE 和代码编辑器通常有更好的语法高亮、自动完成和错误检查支持。

6. 相关文档，可以查看 Vue 官方文档的以下部分：
   单文件组件
   模板引用
   状态管理