概述
当 vue3 新建组件时，我们有两种选择选项式和组合式，如下所示
-
传统方式
<script> import { ref } from "vue"; export default { setup() { const count = ref(0); const handleClick = () => { count.value++; }; return { count, handleClick }; }, }; </script> <template> <h1>传统的sctipt setup</h1> <button @click="handleClick">Count++</button> <p>{ { count }}</p> </template> <style scoped></style> -
组合式
<script setup>
import { ref } from "vue";
const count = ref(0);
const handleClick = () => {
count.value++;
};
</script>
<template>
<h1>组合式sctipt setup</h1>
<button @click="handleClick">Count++</button>
<p>{
{ count }}</p>
</template>
<style scoped></style>
很明显，第二种方式 Componsition API的设计思想更加简洁，这样可以使用类似于React Hooks的方式编写 vue 组件。而<script> 标签中的自定义属性或关键字setup正是Composition API中的一个重要概念。
setup函数可以用于设置组件的初始状态、响应式数据、计算属性、定义事件交互等，当<script>标签使用setup关键字时，相当于也是在定义该 vue 组件的setup函数，并将其中的内容最终暴露给模板使用。
setup详细介绍
setup原理
下面是<script setup>的一些内部原理：
Single File Component (SFC)解析：Vue 的编译器首先会解析 .vue 单文件组件，识别其中的<script setup>部分，并将其视为特殊的语法块进行处理。- 生成
Setup函数：Vue 将<script setup>部分的代码转换为一个单独的 setup 函数。这个函数中包含了组件的状态（通过ref、reactive等函数定义的响应式数据）、计算属性、事件处理函数等。 Props和Context注入：<script setup>中可以直接使用 props 和 context，而不需要显式地声明。Vue 在内部会自动将props和context注入到setup函数中，使开发者可以直接在其中使用这些变量。- 编译优化：使用
<script setup>语法可以帮助 Vue 进行更好的编译优化。由于所有的组件选项都被包装在一个setup函数中，Vue 可以更轻松地进行静态分析和优化，减少运行时的开销。 - 模块化引入：
<script setup>允许开发者在组件内部直接引入外部模块，而不需要像以前那样将其导入到组件的<script>标签中。这简化了组件的导入和使用。
编译过程
当编译器识别到 vue 文件中<script setup>块时，它会将其中的代码视为特殊的语法块，会采取特定的步骤进行处理，如下
- 单文件组件解析：
编译器首先会解析整个单文件组件（Single File Component，SFC），包括<template>、<script>和<style>部分。
它会逐行扫描文件，查找特定的标记（例如<script setup>）以确定每个部分的起始和结束。
一旦找到了<script setup>标记，编译器就会开始处理其中的内容。 - 生成
Setup函数：
编译器会将 <script setup> 部分的代码转换为一个单独的 setup 函数。这个函数包含了组件的状态、计算属性、事件处理函数等逻辑。
如果在 <script setup> 中使用了 props 和 context，编译器会自动将它们注入到 setup 函数中，使开发者可以直接在其中使用这些变量。
如果需要，编译器还会对代码进行必要的转换和优化，以提高性能和可读性。
- 分析变量依赖关系：
编译器会分析 setup 函数中使用的响应式数据、计算属性和其他变量的依赖关系。
这样可以帮助编译器在组件更新时自动跟踪哪些部分需要重新渲染，从而实现更高效的渲染机制。
- 生成组件代码：
一旦 setup 函数和其相关的依赖关系被确定，编译器就会将它们与模板部分和其他组件选项（如 props、methods 等）整合起来，生成最终的组件代码。
这个过程可能会包括将模板编译成渲染函数、合并响应式数据、生成组件的生命周期钩子等步骤。
从中可以看出<script setup> 这种方式比直接使用setup()函数，从性能方面上来说要弱。
@vue/compiler-scf是如何和项目产生联系
我们知道浏览器的引起是无法直接解析.vue文件，因此需要将.vue文件进行编译。vue3 的源码中有一个编译模块@vue/compiler-sfc专门用来编译.vue文件。
那么，@vue/compiler-sfc是如何编译的呢？这可能就取决于我们采用怎样的脚手架，这个模块可以单独的被第三方插件或平台引用
vite中的@vue/compiler-sfc
vite.config.js和@vitejs/plugin-vue
基于vite脚手架创建的 vue3 项目时，会安装@vitejs/plugin-vue插件。在vite的默认配置文件中，会引用该插件，代码如下所示:
import {
defineConfig } from "vite";
import vue from &