有点东西，template可以直接使用setup语法糖中的变量原来是因为这个

有点东西，template可以直接使用setup语法糖中的变量原来是因为这个
你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢？setup语法糖是如何编译成setup函数的呢？
合集 - vue3编译原理揭秘(14)
1.vue3的宏到底是什么东西？02-19 2.Vue 3 的 setup语法糖到底是什么东西？02-26 3.原来 vue3 文件编译是这样工作的！看完后更懂vue3了03-07 4.为什么defineProps宏函数不需要从vue中import导入？03-13 5.天天用defineEmits宏函数，竟然不知道编译后是vue2的选项式API？03-19 6.面试官：只知道v-model是:modelValue和@onUpdate语法糖，那你可以走了03-26 7.父组件明明使用了v-model，子组件竟然可以不用定义props和emit抛出事件，快来看看吧04-08 8.面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？04-18 9.面试官：在原生input上面使用v-model和组件上面使用有什么区别？04-23 10.vue3早已具备抛弃虚拟DOM的能力了05-06 11.vue3编译优化之“静态提升”05-14 12.彻底搞清楚vue3的defineExpose宏函数是如何暴露方法给父组件使用05-29 13.终于搞懂了！原来vue3中template使用ref无需.value是因为这个06-07
14.有点东西，template可以直接使用setup语法糖中的变量原来是因为这个06-14
收起

前言

我们每天写vue3代码的时候都会使用到setup语法糖，那你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢？setup语法糖是如何编译成setup函数的呢？本文将围绕这些问题带你揭开setup语法糖的神秘面纱。注：本文中使用的vue版本为3.4.19。

关注公众号：【前端欧阳】，给自己一个进阶vue的机会

看个demo

看个简单的demo，代码如下：
```
<template>
  <h1>{{ msg }}h1>
  <h2>{{ format(msg) }}h2>
  <h3>{{ title }}h3>
  <Child />
template>

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

const msg = ref("Hello World!");

let title;

if (msg.value) {
  const innerContent = "xxx";
  console.log(innerContent);
  title = "111";
} else {
  title = "222";
}
script>
```
在上面的demo中定义了四个顶层绑定：Child子组件、从util.js文件中导入的format方法、使用ref定义的msg只读常量、使用let定义的title变量。并且在template中直接使用了这四个顶层绑定。

由于innerContent是在if语句里面的变量，不是

前言

看个demo