深入理解 Vue 3 的 “ 语法糖如何简化 Composition API 的使用，并讨论其编译时的转换过程。

大家好，我是老码，今天咱们来聊聊 Vue 3 里那个让人又爱又恨的 <script setup> 语法糖。 说它“爱”，是因为它真的能让你的 Vue 组件代码简洁到飞起；说它“恨”，是因为如果你不了解它背后的原理，很容易踩坑。

咱们今天的目标就是：彻底搞懂 <script setup>，让你用得顺心应手，再也不怕被它“糖”住了！

开胃小菜：<script setup> 是什么？

简单来说，<script setup> 是 Vue 3 提供的一个 语法糖，目的是让咱们用 Composition API 更加方便。 它是一个单文件组件（SFC）中 <script> 标签的一个属性。

如果没有 <script setup>，你要这样写：

<template>
  <div>
    {{ count }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};
</script>

有了 <script setup>，代码直接变成这样：

<template>
  <div>
    {{ count }}
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

看到没？ setup 函数、return 语句，统统不见了！ 代码瞬间清爽了很多。 这就是 <script setup> 的魅力所在。

正餐：<script setup> 的神奇之处

<script setup> 为什么能做到这么简洁？ 这是因为它在编译时做了很多“魔法”。 咱们来逐一揭秘：

1. 自动暴露：变量和函数自动暴露给模板

   在 <script setup> 里面声明的顶层变量和函数，都会被自动暴露给模板使用。 换句话说，你不需要再显式地 return 它们了。

   • 变量： ref、reactive、computed 等创建的响应式变量。
   • 函数： 普通的 JavaScript 函数。

   注意： 只有顶层声明的变量和函数才会被暴露。 如果你在一个函数内部声明变量，那它就只能在函数内部使用，不能在模板中使用。

   <template>
     <div>
       {{ message }}
       <button @click="handleClick">Click me</button>
     </div>
   </template>
   
   <script setup>
   import { ref } from 'vue';
   
   const message = ref('Hello, world!');
   
   const handleClick = () => {
     message.value = 'Button clicked!';
   };
   
   // 在函数内部声明的变量，无法在模板中使用
   const internalVariable = 'This is internal';
   </script>

2. 自动注册组件

   如果你在 <script setup> 中导入了组件，那么这些组件会被自动注册，你可以在模板中直接使用它们，不需要再手动注册 components 选项。

   <template>
     <div>
       <MyComponent />
     </div>
   </template>
   
   <script setup>
   import MyComponent from './MyComponent.vue';
   </script>

   是不是很方便？ 但是，要注意命名规范。 Vue 会根据组件的文件名来推断组件的名称。 建议使用 PascalCase 命名组件文件，比如 MyComponent.vue。

3. defineProps 和 defineEmits

   <script setup> 提供 defineProps 和 defineEmits 这两个编译器宏，用来声明组件的 props 和 emits。 它们不需要导入，可以直接使用。

   • defineProps： 声明 props。 它可以接收两种参数：

     • 对象形式： 类似于 Vue 2 的 props 选项，可以指定 props 的类型、是否必填、默认值等等。
     • 数组形式： 简单地声明 props 的名称，类型由 TypeScript 推断（如果使用了 TypeScript）。

     <script setup>
     // 对象形式
     const props = defineProps({
       message: {
         type: String,
         required: true,
       },
       count: {
         type: Number,
         default: 0,
       },
     });
     
     // 数组形式 (需要开启 TypeScript 支持)
     // const props = defineProps(['message', 'count']);
     </script>

   • defineEmits： 声明 emits。 它也接收两种参数：

     • 数组形式： 简单地声明 emits 的名称。
     • 对象形式 (推荐，需要 TypeScript 支持)： 可以对 emit 的参数进行类型校验。

     <script setup>
     // 数组形式
     const emit = defineEmits(['update:modelValue', 'custom-event']);
     
     // 对象形式 (需要开启 TypeScript 支持)
     // const emit = defineEmits<{
     //   (e: 'update:modelValue', value: string): void
     //   (e: 'custom-event', id: number): void
     // }>()
     
     const handleClick = () => {
       emit('update:modelValue', 'new value');
       emit('custom-event', 123);
     };
     </script>

4. defineExpose

   默认情况下，<script setup> 中的变量和函数都是私有的，不能在父组件中直接访问。 如果你想在父组件中访问子组件的某些变量或函数，可以使用 defineExpose 编译器宏。

   // 子组件
   <script setup>
   import { ref } from 'vue';
   
   const count = ref(0);
   
   const increment = () => {
     count.value++;
   };
   
   defineExpose({
     count,
     increment,
   });
   </script>
   
   // 父组件
   <template>
     <div>
       <ChildComponent ref="child" />
       <button @click="accessChild">Access Child</button>
     </div>
   </template>
   
   <script setup>
   import { ref } from 'vue';
   import ChildComponent from './ChildComponent.vue';
   
   const child = ref(null);
   
   const accessChild = () => {
     console.log(child.value.count);
     child.value.increment();
   };
   </script>

5. useSlots 和 useAttrs

   如果你的组件需要使用 slots 或 attrs，可以使用 useSlots 和 useAttrs 这两个 API。 它们需要从 vue 中导入。

   <template>
     <div>
       <slot name="header"></slot>
       <p>Default content</p>
       <slot name="footer"></slot>
     </div>
   </template>
   
   <script setup>
   import { useSlots, useAttrs } from 'vue';
   
   const slots = useSlots();
   const attrs = useAttrs();
   
   console.log(slots);
   console.log(attrs);
   </script>

主菜：<script setup> 的编译过程

<script setup> 的简洁背后，是 Vue 编译器默默地为你做了很多事情。 咱们来看看它的编译过程：

1. 解析 SFC： Vue 编译器首先会解析 SFC 文件，将 <template>、<script> 和 <style> 分别提取出来。

2. 转换 <script setup>： 这是最关键的一步。 编译器会将 <script setup> 中的代码转换成标准的 JavaScript 代码。 主要包括以下几个步骤：

   • 包裹在 setup 函数中： 将 <script setup> 中的所有代码包裹在一个 setup 函数中。
   • 处理顶层声明：
     • 将顶层变量和函数转换为 ref 或 reactive 变量（如果需要）。
     • 将这些变量和函数添加到 setup 函数的返回值中，以便暴露给模板。
   • 处理 defineProps 和 defineEmits： 将 defineProps 和 defineEmits 转换为 props 和 emits 选项。
   • 处理 defineExpose： 将 defineExpose 转换为 expose 选项。
   • 自动注册组件： 自动注册导入的组件。

3. 生成渲染函数： 根据 <template> 生成渲染函数。

4. 输出 JavaScript 代码： 将转换后的 JavaScript 代码输出。

为了更直观地理解这个过程，咱们来看一个例子：

<template>
  <div>
    {{ message }}
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, world!');

const handleClick = () => {
  message.value = 'Button clicked!';
};
</script>

经过编译后，可能会变成类似这样的代码：

import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const message = ref('Hello, world!');

    const handleClick = () => {
      message.value = 'Button clicked!';
    };

    return {
      message,
      handleClick,
    };
  },
  render: // 省略渲染函数
});

可以看到，<script setup> 中的代码被包裹在 setup 函数中，message 和 handleClick 被添加到 setup 函数的返回值中。

甜点：<script setup> 的注意事项

虽然 <script setup> 很好用，但是也有一些需要注意的地方：

• 不能和 export default 并存： <script setup> 已经隐式地导出了组件，所以不能再使用 export default。 如果你需要导出一些额外的东西，可以使用单独的 <script> 标签。

  <template>
    <div>
      {{ message }}
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const message = ref('Hello, world!');
  </script>
  
  <script>
  // 可以导出一些额外的配置
  export default {
    name: 'MyComponent',
  };
  </script>

• 顶层 await： <script setup> 支持顶层 await，这意味着你可以在 <script setup> 中直接使用 await 关键字。 这在异步加载数据时非常方便。

  <template>
    <div>
      {{ data }}
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const data = ref(null);
  
  const fetchData = async () => {
    const response = await fetch('/api/data');
    data.value = await response.json();
  };
  
  // 顶层 await
  await fetchData();
  </script>

• TypeScript 支持： <script setup> 和 TypeScript 是天生一对。 使用 TypeScript 可以获得更好的类型检查和代码提示。 强烈建议在 <script setup> 中使用 TypeScript。

  <template>
    <div>
      {{ message }}
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  const message = ref<string>('Hello, world!');
  </script>

• 命名冲突： 要避免在 <script setup> 中声明的变量和函数与模板中的变量和函数发生命名冲突。 如果发生冲突，编译器可能会报错。

• 调试： 由于 <script setup> 是一个语法糖，所以在调试时可能会遇到一些困难。 建议使用 Vue Devtools 来调试 <script setup> 组件。

总结：<script setup>，让你的 Vue 代码更上一层楼

<script setup> 是 Vue 3 中一个非常强大的语法糖，它可以让你的 Composition API 代码更加简洁、易读。 但是，要真正掌握 <script setup>，你需要了解它背后的原理和注意事项。

希望今天的讲座能帮助你更好地理解 <script setup>，并在实际开发中灵活运用它，让你的 Vue 代码更上一层楼！

特性	描述
自动暴露	在 <script setup> 中声明的顶层变量和函数会自动暴露给模板使用，无需显式 return。
自动注册组件	导入的组件会自动注册，无需手动在 components 选项中注册。
defineProps	用于声明组件的 props，支持对象形式和数组形式。
defineEmits	用于声明组件的 emits，支持数组形式和对象形式 (推荐，需要 TypeScript 支持)。
defineExpose	用于显式地暴露组件的变量和函数给父组件访问。
useSlots / useAttrs	用于在组件中使用 slots 和 attrs。
顶层 await	支持在 <script setup> 中直接使用 await 关键字。
TypeScript 支持	强烈建议在 <script setup> 中使用 TypeScript，以获得更好的类型检查和代码提示。
不能和 export default 并存	<script setup> 已经隐式地导出了组件，所以不能再使用 export default。 如果需要导出一些额外的配置，可以使用单独的 <script> 标签。
编译过程	编译器会将 <script setup> 中的代码转换成标准的 JavaScript 代码，包括包裹在 setup 函数中、处理顶层声明、处理 defineProps 和 defineEmits、处理 defineExpose、自动注册组件等等。