HUA
首页/文章/vue

Vue 3 的 setup语法糖到底是什么

2024-06-12
3244 字约 11 分钟
...
学习

我们每天写vue3项目的时候都会使用setup语法糖，但是你有没有思考过下面几个问题。setup语法糖经过编译后是什么样子的？为什么在setup顶层定义的变量可以在template中可以直接使用？为什么import一个组件后就可以直接使用，无需使用components 选项来显式注册组件？

要回答上面的问题，我们先来了解一下从一个vue文件到渲染到浏览器这一过程经历了什么？

我们的vue代码一般都是写在后缀名为vue的文件上，显然浏览器是不认识vue文件的，浏览器只认识html、css、jss等文件。所以第一步就是通过webpack或者vite将一个vue文件编译为一个包含render函数的js文件。然后执行render函数生成虚拟DOM，再调用浏览器的DOM API根据虚拟DOM生成真实DOM挂载到浏览器上。

 

在javascript标准中script标签是不支持setup属性的，浏览器根本就不认识setup属性。所以很明显setup是作用于编译时阶段，也就是从vue文件编译为js文件这一过程。

我们来看一个简单的demo，这个是index.vue源代码：

<template>
  <h1>{{ title }}</h1>
  <h1>{{ msg }}</h1>
  <Child />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Child from "./child.vue";

const msg = ref("Hello World!");
const title = "title";
if (msg.value) {
  const content = "content";
  console.log(content);
}
</script>

这里我们定义了一个名为msg的ref响应式变量和非响应式的title变量，还有import了child.vue组件。

这个是child.vue的源代码

<template>
  <div>i am child</div>
</template>

我们接下来看index.vue编译后的样子，代码我已经做过了简化：

import { ref } from "vue";
import Child from "./Child.vue";

const title = "title";

const __sfc__ = {
  __name: "index",
  setup() {
    const msg = ref("Hello World!");
    if (msg.value) {
      const content = "content";
      console.log(content);
    }
    const __returned__ = { title, msg, Child };
    return __returned__;
  },
};

import {
  toDisplayString as _toDisplayString,
  createElementVNode as _createElementVNode,
  createVNode as _createVNode,
  Fragment as _Fragment,
  openBlock as _openBlock,
  createElementBlock as _createElementBlock,
} from "vue";
function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    _openBlock(),
    _createElementBlock(
      _Fragment,
      null,
      [
        _createElementVNode("h1", null, _toDisplayString($setup.title)),
        _createElementVNode(
          "h1",
          null,
          _toDisplayString($setup.msg),
          1 
        ),
        _createVNode($setup["Child"]),
      ],
      64 
    )
  );
}
__sfc__.render = render;
export default __sfc__;

我们可以看到index.vue编译后的代码中已经没有了template标签和script标签，取而代之是render函数和__sfc__对象。并且使用__sfc__.render = render将render函数挂到__sfc__对象上，然后将__sfc__对象export default出去。

看到这里你应该知道了其实一个vue组件就是一个普通的js对象，import一个vue组件，实际就是import这个js对象。这个js对象中包含render方法和setup方法。

编译后的setup方法

我们先来看看这个setup方法，是不是觉得和我们源代码中的setup语法糖中的代码很相似？没错，这个setup方法内的代码就是由setup语法糖中的代码编译后来的。

setup语法糖原始代码

<script lang="ts" setup>
import { ref } from "vue"
import Child from "./child.vue"

const msg = ref("Hello World!")
const title = "title"
if (msg.value) {
  const content = "content"
  console.log(content)
}
</script>

setup编译后的代码

import { ref } from "vue"
import Child from "./Child.vue"

const title = "title"

const __sfc__ = {
  __name: "index",
  setup() {
    const msg = ref("Hello World!")
    if (msg.value) {
      const content = "content"
      console.log(content)
    }
    const __returned__ = { title, msg, Child }
    return __returned__
  },
}

经过分析我们发现title变量由于不是响应式变量，所以编译后title变量被提到了js文件的全局变量上面去了。而msg变量是响应式变量，所以依然还是在setup方法中。我们再来看看setup的返回值，返回值是一个对象，对象中包含title、msg、Child属性，非setup顶层中定义的content变量就不在返回值对象中。

看到这里，可以回答我们前面提的第一个问题。

setup语法糖经过编译后是什么样子的？

setup语法糖编译后会变成一个setup方法，编译后setup方法中的代码和script标签中的源代码很相似。方法会返回一个对象，对象由setup中定义的顶层变量和import导入的内容组成。

由template编译后的render函数

我们先来看看原本template中的代码：

<template>
  <h1>{{ title }}</h1>
  <h1>{{ msg }}</h1>
  <Child />
</template>

我们再来看看由template编译成的render函数：

import {
  toDisplayString as _toDisplayString,
  createElementVNode as _createElementVNode,
  createVNode as _createVNode,
  Fragment as _Fragment,
  openBlock as _openBlock,
  createElementBlock as _createElementBlock,
} from "vue";
function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    _openBlock(),
    _createElementBlock(
      _Fragment,
      null,
      [
        _createElementVNode("h1", null, _toDisplayString($setup.title)),
        _createElementVNode(
          "h1",
          null,
          _toDisplayString($setup.msg),
          1 
        ),
        _createVNode($setup["Child"]),
      ],
      64 
    )
  );
}

我们这次主要看在render函数中如何访问setup中定义的顶层变量title、msg，createElementBlock和createElementVNode等创建虚拟DOM的函数不在这篇文章的讨论范围内。你只需要知道createElementVNode("h1", null, _toDisplayString($setup.title))为创建一个h1标签的虚拟DOM就行了。

在render函数中我们发现读取title变量的值是通过$setup.title读取到的，读取msg变量的值是通过$setup.msg读取到的。这个$setup对象就是调用render函数时传入的第四个变量，我想你应该猜出来了，这个$setup对象和前面的setup方法返回的对象有关系。

那么问题来了，在执行render函数的时候是如何将setup方法的返回值作为第四个变量传递给render函数的呢？我在下一节会一步一步的带你通过debug源码的方式去搞清楚这个问题，我们带着问题去debug源码其实非常简单。

有的小伙伴看到这里需要看源码就觉得头大了，别着急，其实很简单，我会一步一步的带着你去debug源码。

首先我们将Enable JavaScript source maps给取消勾选了，不然在debug源码的时候断点就会走到vue文件中，而不是走到编译会的js文件中。

 

 

然后我们需要在设置里面的Ignore List看看node_modules文件夹是否被忽略。新版谷歌浏览器中会默认排除掉node_modules文件夹，所以我们需要将这个取消勾选。如果忽略了node_modules文件夹，那么debug的时候断点就不会走到node_modules中vue的源码中去了。

 

 

接下来我们需要在浏览器中找到vue文件编译后的js代码，我们只需要在network面板中找到这个vue文件的http请求，然后在Response下右键选择Open in Sources panel，就会自动在sources面板自动打开对应编译后的js文件代码。

 

 

找到编译后的js文件，我们想debug看看是如何调用render函数的，所以我们给render函数加一个断点。然后刷新页面，发现代码已经走到了断点的地方。我们再来看看右边的Call Stack调用栈，发现render函数是由一个vue源码中的renderComponentRoot函数调用的。

 

 

点击Call Stack中的renderComponentRoot函数就可以跳转到renderComponentRoot函数的源码，我们发现renderComponentRoot函数中调用render函数的代码主要是下面这样的：

function renderComponentRoot(instance) {
  const {
    props,
    data,
    setupState,
    
  } = instance;

  render2.call(
    thisProxy,
    proxyToUse,
    renderCache,
    props,
    setupState,
    data,
    ctx
  )
}

这里我们可以看到前面的$setup实际就是由setupState赋值的，而setupState是当前vue实例上面的一个属性。那么setupState属性是如何被赋值到vue实例上面的呢？

我们需要给setup函数加一个断点，然后刷新页面进入断点。通过分析Call Stack调用栈，我们发现setup函数是由vue中的一个setupStatefulComponent函数调用执行的。

 

 

点击Call Stack调用栈中的setupStatefulComponent，进入到setupStatefulComponent的源码。我们看到setupStatefulComponent中的代码主要是这样的：

function setupStatefulComponent(instance) {
  const { setup } = Component;
  
  const setupResult = callWithErrorHandling(
    setup,
    instance
  );
  handleSetupResult(instance, setupResult);
}

setup函数是Component上面的一个属性，我们将鼠标放到Component上面，看看这个Component是什么东西？

 

 

看到这个Component对象中既有render方法也有setup方法是不是感觉很熟悉，没错这个Component对象实际就是我们的vue文件编译后的js对象。

const __sfc__ = {
  __name: "index",
  setup() {
    const msg = ref("Hello World!")
    if (msg.value) {
      const content = "content"
      console.log(content)
    }
    const __returned__ = { title, msg, Child }
    return __returned__
  },
}

__sfc__.render = render

从Component对象中拿到setup函数，然后执行setup函数得到setupResult对象。然后再调用handleSetupResult(instance, setupResult);

我们再来看看handleSetupResult函数是什么样的，下面是我简化后的代码：

function handleSetupResult(instance, setupResult) {
  if (isFunction(setupResult)) {
    
  } else if (isObject(setupResult)) {
    instance.setupState = proxyRefs(setupResult);
  }
}

我们的setup的返回值是一个对象，所以这里会执行instance.setupState = proxyRefs(setupResult)，将setup执行后的返回值经过new Proxy处理后赋值到vue实例的setupState属性上，而new Proxy中的get就是用于处理在template中使用ref不需要使用.value的写法。

看到这里我们整个流程已经可以串起来了，首先会执行由setup语法糖编译后的setup函数。然后将setup函数中由顶层变量和import导入组成的返回值对象经过Proxy处理后赋值给vue实例的setupState属性，然后执行render函数的时候从vue实例中取出setupState属性也就是setup的返回值。这样在render函数也就是template模版就可以访问到setup中的顶层变量和import导入。

 

 

现在我们可以回答前面提的另外两个问题了：

为什么在setup顶层定义的变量可以在template中可以直接使用？

因为在setup语法糖顶层定义的变量经过编译后会被加入到setup函数返回值对象__returned__中，而非setup顶层定义的变量不会加入到__returned__对象中。setup函数返回值经过Proxy处理后会被塞到vue实例的setupState属性上，执行render函数的时候会将vue实例上的setupState属性传递给render函数，所以在render函数中就可以访问到setup顶层定义的变量和import导入。而render函数实际就是由template编译得来的，所以说在template中可以访问到setup顶层定义的变量和import导入。。

为什么import一个组件后就可以直接使用，无需使用components 选项来显式注册组件？

因为在setup语法糖中import导入的组件对象经过编译后同样也会被加入到setup函数返回值对象__returned__中，同理在template中也可以访问到setup的返回值对象，也就可以直接使用这个导入的组件了。

setup语法糖经过编译后就变成了setup函数，而setup函数的返回值是一个对象，这个对象就是由在setup顶层定义的变量和import导入组成的。vue在初始化的时候会执行setup函数，然后将setup函数返回值经过Proxy处理后塞到vue实例的setupState属性上。执行render函数的时候会将vue实例上的setupState属性（也就是setup函数的返回值）传递给render函数，所以在render函数中就可以访问到setup顶层定义的变量和import导入。而render函数实际就是由template编译得来的，所以说在template中就可以访问到setup顶层定义的变量和import导入。

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →
vue2025-10-22
shallowRef 与 ref 的区别、场景与坑位
结论先行： 会 深度 地把你放进去的对象转成响应式（递归代理），因此"对象内部的改动"也会触发视图更新。 只在 顶层 做依赖追踪： 更换 才触发更新 ；若你只是"在原对象上改属性"，不会触发，除非手动 。 1\. 快速对比 维度 追踪粒度 深度（递归） 仅顶层 对象内部属性变更 会触发更新 不会 触发（除非 或重新赋值） 性能 有递归 & 依赖跟踪开销 更轻量，适合大对象/第三方实例 适用对象 普通标量、普通对象、数组 第三方实例（图表...
学习面试
vue2025-10-20
Vue 3 中的 setup执行时机与异步逻辑详解
Vue 3 中的 执行时机与异步逻辑详解 本文详细介绍 Vue 3 组合式 API 的核心函数 ：它在组件生命周期中的执行时机、异步行为（ 的影响）、常见用法和最佳实践。 一、 的执行时机 是 Vue 3 组件实例创建后、渲染前执行的函数。 它相当于 Vue 2 中的 和 的合体。 执行流程： 也就是说： 所有响应式数据（ 、 、 ）都在这里定义； 所有生命周期钩子（ 、 等）都在这里注册； 模板渲染会等待 执行完成（或异步返回的 Pr...
学习面试
vue2025-10-08
vue中ref与reactive
Vue 3 的 与 ：区别、实现，以及为什么更推荐 1\. 一句话结论 ：适合 原始类型 或 独立、细粒度 的状态单元；类型推断明确、解构安全、追踪粒度更小， 默认首选 。 ：适合管理 对象/集合 这类结构化状态；但 解构会丢失响应性 ， 默认 非深度 ，需要正确的使用姿势配合。 2\. 用法与语义差异 2.1 基本示例 2.2 模板中的解包（unwrapping） 在 模板 里， 会 自动解包 ，可直接写 ，不必 。 在响应式对象中...
学习面试
vue2025-09-23
Vue3 中computed属性依赖总结
Vue3 属性依赖总结 1. 依赖收集机制 的 getter 内部 读取 到哪些响应式变量 ( / )，就会把这些变量收集为依赖。 当这些依赖发生变化时， 会重新计算。 2. 如果只返回常量 始终是 。 修改 或 不会触发 重新计算，因为 getter 内没有访问它们。 3. 如果访问了响应式变量但仍返回常量 初始化时会打印一次。 当 或 改变时，getter 会重新执行（再次打印），因为它们被收集为依赖。 但 依旧始终是 。 4. 总...
学习面试
vue2025-09-17
template标签为什么不可以使用v-show
前言 写 Vue 时，最容易踩的小坑之一，就是给 套一个 。编辑器不报错，页面却“消失”了。很多人以为这是 bug，其实它只是 Vue 的底层设计在默默提醒： 不是真节点，它只是个“草稿纸”。 一、为什么 拒绝 v show 的本质是切换元素的 CSS： 。浏览器要找到真实 DOM 节点，才能给它加样式。而 在运行时会被完全剥离，不会留下任何标签，Vue 找不到节点，也就无处下刀。 举个反面教材： 打开控制台，你会看到 还是生成了，但...
学习面试
vue2025-09-17
Vue 3中watchEffect自动追踪详解
Vue 3 自动追踪详解 一、是什么 是 Vue 3 Composition API 提供的一个响应式副作用（side effect）函数。 它会 立即执行一次回调函数 ，并且在回调函数中访问到的所有响应式数据（ref、reactive、computed 等）都会被 自动追踪 。 当这些依赖的响应式数据发生变化时，回调会重新执行。 简单理解： 能“自动发现”它用到的响应式变量，不需要手动指定依赖。 二、基本用法 特点： 第一次立即执行...
学习面试

评论

请登录后发表评论

去登录
加载评论中...

目录