Vue 3源码深度解析之：`setup`和`script setup`：两种写法的设计思想与编译差异。

各位观众老爷们，大家好！今天咱们聊聊Vue 3里让人又爱又恨的 setup 和 script setup。爱的是它们让组件开发更爽了，恨的是…有时候搞不清到底该用哪个，以及它们背后的机制。别慌，今天咱们就来扒个底朝天，看看这俩兄弟到底有啥区别，以及Vue 3的编译器是怎么把它们变成我们想要的样子。

开场白：Vue 3 的现代化组件之旅

Vue 3 引入 setup 函数，标志着组件开发进入了一个全新的时代。它允许我们使用Composition API，从而更好地组织和复用逻辑。而 script setup 则是更进一步，它简化了 setup 的语法，让组件代码更加简洁。

第一幕：setup 函数——元老级人物

首先，让我们回顾一下 setup 函数。它是在组件创建 之前 执行的，作为使用 Composition API 的入口。它接受两个参数：props 和 context。

• props： 组件接收到的 props 对象。
• context： 一个对象，包含三个属性：
  • attrs：组件接收到的非 props attribute（例如，class、style）。
  • emit：用于触发自定义事件。
  • slots：组件接收到的插槽。

代码示例：经典的 setup 函数

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

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

export default {
  props: {
    initialCount: {
      type: Number,
      default: 0
    }
  },
  setup(props, context) {
    const count = ref(props.initialCount);

    const increment = () => {
      count.value++;
      context.emit('update', count.value); // 触发自定义事件
    };

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

在这个例子中：

1. 我们定义了 props 对象，包含 initialCount 属性。
2. 在 setup 函数中，我们使用 ref 创建了一个响应式变量 count，并初始化为 props.initialCount。
3. increment 函数用于增加 count 的值，并使用 context.emit 触发一个自定义事件 update。
4. 最后，我们从 setup 函数中返回一个对象，包含了 count 和 increment，它们会被暴露给模板使用。

setup 函数的特点总结：

特点	说明
执行时机	在组件实例创建 之前 执行。
参数	接收 props 和 context 两个参数。
返回值	必须返回一个对象，该对象中的属性和方法会被暴露给模板使用。 如果使用渲染函数，则可以不返回对象，直接返回渲染函数。
访问this	在 setup 函数中 不能 访问 this，因为它是在组件实例创建之前执行的。
类型推断	需要显式地声明 props 的类型，否则 TypeScript 可能无法正确推断类型。
需要明确的return	需要明确地从 setup 函数中返回要暴露给模板使用的变量和函数。

第二幕：script setup——后起之秀

script setup 是 Vue 3.2 引入的语法糖，它极大地简化了 setup 函数的写法。通过在 <script> 标签上添加 setup 属性，我们可以直接在 <script> 标签中编写 Composition API 的代码，而无需显式地定义 setup 函数，也无需显式地 return。

代码示例：使用 script setup 改造上面的例子

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

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

const props = defineProps({
  initialCount: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['update']);

const count = ref(props.initialCount);

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

可以看到，代码变得更加简洁了：

1. 我们不再需要显式地定义 setup 函数。
2. 使用 defineProps 宏来声明 props。
3. 使用 defineEmits 宏来声明自定义事件。
4. 在 <script setup> 中声明的变量和函数会自动暴露给模板使用，无需显式地 return。

script setup 的特点总结：

特点	说明
执行时机	类似于 setup 函数，在组件实例创建 之前 执行。
语法	通过在 <script> 标签上添加 setup 属性启用。
声明 Props	使用 defineProps 宏来声明 props。
声明 Emits	使用 defineEmits 宏来声明自定义事件。
自动暴露	在 <script setup> 中声明的变量和函数会自动暴露给模板使用，无需显式地 return。
类型推断	具有更好的类型推断能力，通常不需要显式地声明类型。
更简洁的语法	代码更加简洁，可读性更高。

重要提示：defineProps 和 defineEmits 的使用

defineProps 和 defineEmits 不是普通的函数，而是 编译器宏。这意味着它们只在编译时起作用，不会在运行时执行。它们会被编译器替换成相应的代码，用于声明 props 和自定义事件。

第三幕：编译差异——Vue 编译器的幕后操作

现在，让我们深入了解一下 Vue 编译器是如何处理 setup 和 script setup 的。

setup 函数的编译过程

对于 setup 函数，编译器会按照以下步骤进行处理：

1. 解析组件选项对象，提取 props、data、methods、computed 等属性。
2. 将 setup 函数转换为一个标准的 JavaScript 函数。
3. 在组件实例创建时，执行 setup 函数，并将 props 和 context 作为参数传递给它。
4. 将 setup 函数返回的对象合并到组件实例的 data 属性中，以便模板可以访问这些属性。

script setup 的编译过程

script setup 的编译过程更加复杂，因为它涉及到更多的语法糖和优化。编译器会按照以下步骤进行处理：

1. 解析 <script setup> 标签中的代码。
2. 使用 defineProps 宏声明 props，生成相应的 props 选项。
3. 使用 defineEmits 宏声明自定义事件，生成相应的 emits 选项。
4. 将 <script setup> 中的所有顶层变量和函数都视为需要暴露给模板使用的。
5. 生成一个内部的 setup 函数，该函数会将 <script setup> 中的变量和函数暴露给模板。
6. 对代码进行优化，例如自动解构 props、自动生成计算属性等。

关键区别：自动暴露 vs. 手动暴露

setup 函数需要手动 return 要暴露给模板使用的变量和函数，而 script setup 则会自动暴露所有顶层变量和函数。这是它们最主要的区别。

代码示例：简化版的编译器转换 (仅供参考，实际编译器实现远比这复杂)

为了更好地理解编译过程，我们可以看一下简化版的编译器转换示例：

原始代码 (使用 script setup)：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

const message = ref('Hello, Vue 3!');
</script>

编译后的代码 (简化版)：

import { ref, defineComponent } from 'vue';

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

    return {
      message
    };
  },
  render(_ctx, _cache, $props, $setup, $data, $options) {
      return (_openBlock(), _createElementBlock("div", null, [
        _createElementVNode("p", null, _toDisplayString(_ctx.message), 1 /* TEXT */)
      ]))
    }
});

可以看到，编译器自动生成了一个 setup 函数，并将 message 返回给模板使用。

第四幕：选择困难症——该用哪个？

那么，在实际开发中，我们应该选择 setup 函数还是 script setup 呢？

选择原则：

• 首选 script setup： 在大多数情况下，script setup 都是更好的选择。它语法更简洁，可读性更高，并且具有更好的类型推断能力。
• 特殊情况使用 setup： 在某些特殊情况下，可能需要使用 setup 函数。例如：
  • 当你需要更精细地控制组件选项时。
  • 当你需要在 setup 函数中使用一些特殊的插件或库时。
  • 当你的项目需要兼容旧版本的 Vue 时。

表格对比：setup vs. script setup

特性	setup 函数	script setup
语法	需要显式地定义 setup 函数。	通过在 <script> 标签上添加 setup 属性启用。
声明 Props	在组件选项对象中声明 props。	使用 defineProps 宏来声明 props。
声明 Emits	使用 context.emit 触发自定义事件。	使用 defineEmits 宏来声明自定义事件。
暴露变量和函数	需要显式地从 setup 函数中返回要暴露给模板使用的变量和函数。	在 <script setup> 中声明的变量和函数会自动暴露给模板使用。
类型推断	需要显式地声明 props 的类型，否则 TypeScript 可能无法正确推断类型。	具有更好的类型推断能力，通常不需要显式地声明类型。
适用场景	当你需要更精细地控制组件选项时，或者需要兼容旧版本的 Vue 时。	在大多数情况下都是更好的选择，语法更简洁，可读性更高。
代码量	相对较多	相对较少

第五幕：高级用法与注意事项

• expose 宏： 在 script setup 中，如果你只想暴露部分变量和函数，可以使用 defineExpose 宏。例如：

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

const message = ref('Hello, Vue 3!');
const internalValue = ref('This is internal');

defineExpose({
  message
});
</script>

在这个例子中，只有 message 会被暴露给父组件，internalValue 则不会。

• 顶层 await： script setup 支持顶层 await，这意味着你可以在 <script setup> 中直接使用 await 表达式，而无需将其包裹在 async 函数中。这对于异步初始化非常方便。

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

const data = ref(null);

data.value = await fetchData(); // 直接在顶层使用 await

async function fetchData() {
  // 模拟异步请求
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ message: 'Data fetched!' });
    }, 1000);
  });
}
</script>

• 与 name 选项的结合： 如果你需要在组件中使用 name 选项（例如，用于递归组件），可以使用 defineOptions 宏。

<script setup>
defineOptions({
  name: 'MyComponent'
})
</script>

• 混用 setup 和 script setup： 虽然不推荐，但你可以在同一个组件中同时使用 setup 函数和 script setup。在这种情况下，script setup 中的代码会先执行，然后是 setup 函数中的代码。

总结陈词：拥抱现代化组件开发

setup 和 script setup 是 Vue 3 中非常重要的两个概念。它们让组件开发更加灵活、高效和可维护。通过理解它们的设计思想和编译差异，我们可以更好地利用 Composition API，构建出更加强大的 Vue 应用。希望今天的讲解对大家有所帮助！下次再见！