setup() 函数式写法与 <script setup> 形式写法的区别与不同

一、语法简洁性：

• setup() ：你需要在组件中显式地定义一个 setup() 函数，并在其中使用 Composition API。
• <script setup> ：你可以直接在 <script setup> 标签内使用 Composition API，无需定义 setup() 函数，这使得代码更加简洁。

二、上下文自动暴露：

• setup() ：在 setup() 函数中，你需要显式地通过参数获取 props 和 context（包含 attrs、slots 和 emit）。
• <script setup> ：在 <script setup> 中，props 会被自动暴露为组件的属性，context 中的 attrs 和 slots 会被自动暴露为组件的响应式属性，而 emit 可以通过 defineEmits 宏来定义，但通常直接使用 context.emit 是可选项，因为可以直接使用 defineEmit 宏来定义事件。

三、模板引用

• setup() ：在 setup() 函数中，你需要通过 ref 创建一个模板引用，并在 setup() 函数的返回对象中提供这个引用。
• <script setup> ：在 <script setup> 中，你可以直接使用 ref 创建模板引用，并通过模板中的 ref 指令绑定到 DOM 元素上，无需在返回对象中提供

四、响应式状态与逻辑

• 在这一点上，两者没有区别。两者都使用 ref、reactive、computed、watch 等 Composition API 函数来创建和管理响应式状态和逻辑。