Vue3 中语法糖的详细指南与对比分析

在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()函数可能更加适合。