vue3 <script>和<script setup>和setip()的区别

<script>是 Vue2 中常规的组件脚本写法，其中需要手动导入和使用 Vue 的各种 API。

<script setup>是 Vue3 中新增的语法糖，它可以自动将 Vue 的 API 注入到组件内，不需要手动导入。同时，<script setup>还可以自动将组件实例中的 props、emit、slots 等属性对应到脚本中。使用< script setup>可以简化组件代码量，在保持传统 <script> 的灵活性的同时，提供更好的可读性、可维护性。

同时，<script setup>还具有以下特点：

1. 只能在 SFC (Single File Components) 中使用。

2. 可以在脚本中使用 TypeScript 等类型检查工具。

3. 提供了单文件组件的更高效的编译方式，能够提高编译速度。

setup()是< script setup>中用于导出组件选项的函数。在 setup() 函数中可以使用 Vue 的 API 构建组件的响应式数据、监听事件等，最终将所需的选项返回给组件。通过 setup() 函数，可以对组件进行更加灵活和高效的编写和管理。