Vue3的＜script setup＞ 和传统的 ＜script＞区别

1. 语法简洁性：

   - <script>中`setup()` 函数需要手动导入所有需要使用的选项（如 props、emit 等），并且必须通过 `return` 语句暴露给模板使用。

   - `<script setup>` 则自动引入了作用域内的 props、emit 和其他 Vue 组件选项，并且不需要显式地返回值。

2. 编译器处理：

   - `<script setup>` 是一个编译时指令，这意味着它由 Vue 编译器特殊处理，而不是像传统 `<script>` 那样直接作为 JavaScript 执行。

   - 使用 `<script setup>` 的代码会被编译为原生的渲染函数和响应式声明，这样可以提高性能。

3. 作用域：

   - 在 `<script setup>` 中定义的变量和方法默认是私有的，不会暴露到全局。

   - 如果想让某些数据或方法公开给模板或其他外部文件，可以使用 `defineProps`、`defineEmits` 和 `defineExpose` API。

4. 模块捆绑优化：

   - `<script setup>` 可以利用 Tree-shaking 技术来减少最终打包后的代码大小，因为它允许编译器更好地了解哪些代码块实际上被用到了。

5. 顶层 await：

   - 在 `<script setup>` 中支持顶层 `await` 关键字，这使得异步初始化变得更加容易。

6. SFC 特性集成：

   - `<script setup>` 提供了一些新的 SFC 特性，比如可以直接使用 `ref`、`reactive`、`watch` 等 Composition API 方法而无需先导入它们。

7. 组合式 API：

   - `<script setup>` 主要是为了简化使用组合式 API 的过程，特别是对于那些不需要复杂生命周期钩子和外部可复用功能的简单组件。

8. 无法访问 this：

   - 在 `<script setup>` 中，你不能直接访问 `this`，因为它是基于Composition API 的，不依赖于 Vue 实例。

9. 非标准 HTML 属性：

   - `<script setup>` 不是一个标准的 HTML 属性，因此如果你打算将你的项目部署到没有 Vue 运行时环境的地方，你需要考虑这一点。

总的来说，`<script setup>` 是一种更加现代和简化的写法，特别是在结合 Vue3 的 Composition API 使用时，它可以提供更好的开发体验。而传统的 `<script>` 更适合那些需要兼容 Vue2 或者希望保持与传统 Vue 开发方式一致的场景。