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

文章预览

本文约 5000+ 字，整篇阅读大约需要17分钟。 前言 我们每天写vue3代码的时候都会使用到setup语法糖，那你知道为什么setup语法糖中的顶层绑定可以在template中直接使用的呢？setup语法糖是如何编译成setup函数的呢？本文将围绕这些问题带你揭开setup语法糖的神秘面纱。注：本文中使用的vue版本为 3.4.19 。 看个demo 看个简单的demo，代码如下：    {{ msg }}    {{ format(msg) }}    {{ title }}    "ts" setup>
import { ref } from "vue";
import Child from "./child.vue";
import { format } from "./util.js";

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

let ………………………………