vue3中script标签的setup实现原理

Jinuss

已于 2024-12-04 08:55:31 修改

阅读量1.8k

点赞数 31

CC 4.0 BY-SA版权

分类专栏：源码前端 # Vue 文章标签： javascript vue.js 前端

于 2024-08-21 16:25:56 首次发布

本文链接：https://blog.csdn.net/m0_46281382/article/details/141396829

概述

当 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 "@vitejs/plugin-vue";

export default defineConfig({

最低0.47元/天解锁文章

200万优质内容无限畅学

vue3中script标签的setup实现原理

概述

setup详细介绍

setup原理

编译过程

@vue/compiler-scf是如何和项目产生联系

vite中的@vue/compiler-sfc

vite.config.js和@vitejs/plugin-vue

`setup`详细介绍

`setup`原理

`@vue/compiler-scf`是如何和项目产生联系

`vite`中的`@vue/compiler-sfc`

`vite.config.js`和`@vitejs/plugin-vue`