在Vue 3中，<script setup> 是一种新的语法糖，它为使用组合式 API 提供了一种更简洁和高效的方式来编写组件逻辑。以下是<script setup>与普通setup()函数的主要区别和知识点：
1. 语法简洁性
-
普通
setup()函数：需要显式地返回需要暴露给模板的数据和方法。<script> export default {setup() {const count = ref(0);function increment() {count.value++;}return { count, increment };}, }; </script> -
<script setup>语法糖：自动将定义的所有顶级变量暴露给模板，无需手动返回。<script setup> import { ref } from 'vue'; const count = ref(0); function increment() {count.value++; } </script>
2. 性能优化
<script setup>：在编译时进行优化，避免了运行时的开销。Vue在编译阶段就能确定哪些变量需要暴露给模板，因此它比普通setup()函数更高效。
3. 顶层作用域
- 普通
setup()函数：所有变量和方法都需要在函数内定义，且需要通过return暴露给模板。 <script setup>：变量直接定义在<script>标签内部，并且会自动暴露给模板，无需显式返回。
4. 书写习惯
- 对于需要显式生命周期钩子或使用复杂逻辑的场景，普通
setup()函数依旧是一种常见的选择。 - 而对于简单组件或倾向于使用简洁代码的场景，
<script setup>更受青睐。
5. 模块引用
- 在普通
setup()中，模块的导入和变量声明都与传统的<script>标签类似。 <script setup>可以将导入的模块、声明的变量、定义的函数都直接暴露给模板，无需手动管理暴露。
6. <script setup>的特殊功能
-
Vue 3 引入了
<script setup>语法糖，使得props和emits的声明更加简洁。1. 使用
defineProps和 `defineEmits<script setup> import { defineProps, defineEmits } from 'vue';// Props const props = defineProps({propA: Number,propB: {type: String,default: 'default value'} });// Emits const emit = defineEmits(['custom-event']);// 方法 function handleClick() {emit('custom-event', 'Hello from child component!'); } </script><template><button @click="handleClick">Click me</button> </template>2. 使用
withDefaults设置默认值<script setup> import { withDefaults } from 'vue';const props = withDefaults(defineProps<{propA?: number;propB?: string; }>(), {propA: 100,propB: 'default value' }); </script> -
CSS 变量支持：
<script setup>支持直接使用<style scoped>来自动应用CSS变量，无需额外配置。
7. 总结
<script setup>是Vue 3中推荐的组合式API使用方式，它提供了更简洁的代码结构、更好的性能和IDE支持。对于简单的组件，使用<script setup>可以减少样板代码，提高开发效率。而对于需要复杂逻辑和生命周期控制的组件，传统的setup()函数可能更加适合。
