前言

我們每天寫vue3代碼的時(shí)候都會(huì)使用到setup語(yǔ)法糖，那你知道為什么setup語(yǔ)法糖中的頂層綁定可以在template中直接使用的呢？setup語(yǔ)法糖是如何編譯成setup函數(shù)的呢？本文將圍繞這些問(wèn)題帶你揭開(kāi)setup語(yǔ)法糖的神秘面紗。注：本文中使用的vue版本為3.4.19。

看個(gè)demo

看個(gè)簡(jiǎn)單的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中定義了四個(gè)頂層綁定：Child子組件、從util.js文件中導(dǎo)入的format方法、使用ref定義的msg只讀常量、使用let定義的title變量。并且在template中直接使用了這四個(gè)頂層綁定。

由于innerContent是在if語(yǔ)句里面的變量，不是<script setup>中的頂層綁定，所以在template中是不能使用innerContent的。

但是你有沒(méi)有想過(guò)為什么<script setup>中的頂層綁定就能在template中使用，而像innerContent這種非頂層綁定就不能在template中使用呢？

我們先來(lái)看看上面的代碼編譯后的樣子，在之前的文章中已經(jīng)講過(guò)很多次如何在瀏覽器中查看編譯后的vue文件，這篇文章就不贅述了。編譯后的代碼如下：

import { defineComponent as _defineComponent } from "/node_modules/.vite/deps/vue.js?v=23bfe016";
import { ref } from "/node_modules/.vite/deps/vue.js?v=23bfe016";
import Child from "/src/components/setupDemo2/child.vue";
import { format } from "/src/components/setupDemo2/util.js";

const _sfc_main = _defineComponent({
  __name: "index",
  setup(__props, { expose: __expose }) {
    __expose();
    const msg = ref("Hello World!");
    let title;
    if (msg.value) {
      const innerContent = "xxx";
      console.log(innerContent);
      title = "111";
    } else {
      title = "222";
    }
    const __returned__ = {
      msg,
      get title() {
        return title;
      },
      set title(v) {
        title = v;
      },
      Child,
      get format() {
        return format;
      },
    };
    return __returned__;
  },
});

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  // ...省略
}
_sfc_main.render = _sfc_render;
export default _sfc_main;

從上面的代碼中可以看到編譯后已經(jīng)沒(méi)有了<script setup>，取而代之的是一個(gè)setup函數(shù)，這也就證明了為什么說(shuō)setup是一個(gè)編譯時(shí)語(yǔ)法糖。

setup函數(shù)的參數(shù)有兩個(gè)，第一個(gè)參數(shù)為組件的 props。第二個(gè)參數(shù)為Setup 上下文對(duì)象，上下文對(duì)象暴露了其他一些在 setup 中可能會(huì)用到的值，比如：expose等。

再來(lái)看看setup函數(shù)中的內(nèi)容，其實(shí)和我們的源代碼差不多，只是多了一個(gè)return。使用return會(huì)將組件中的那四個(gè)頂層綁定暴露出去，所以在template中就可以直接使用<script setup>中的頂層綁定。

值的一提的是在return對(duì)象中title變量和format函數(shù)有點(diǎn)特別。title、format這兩個(gè)都是屬于訪問(wèn)器屬性，其他兩個(gè)msg、Child屬于常見(jiàn)的數(shù)據(jù)屬性。

title是一個(gè)訪問(wèn)器屬性，同時(shí)擁有g(shù)et 和 set，讀取title變量時(shí)會(huì)走進(jìn)get中，當(dāng)給title變量賦值時(shí)會(huì)走進(jìn)set中。

format也是一個(gè)訪問(wèn)器屬性，他只擁有g(shù)et ，調(diào)用format函數(shù)時(shí)會(huì)走進(jìn)get中。由于他沒(méi)有set，所以不能給format函數(shù)重新賦值。其實(shí)這個(gè)也很容易理解，因?yàn)閒ormat函數(shù)是從util.js文件中import導(dǎo)入的，當(dāng)然不能給他重新賦值。

至于在template中是怎么拿到setup函數(shù)返回的對(duì)象可以看我的另外一篇文章： Vue 3 的 setup語(yǔ)法糖到底是什么東西？

看到這里有的小伙伴會(huì)有疑問(wèn)了，不是還有一句import { ref } from "vue"也是頂層綁定，為什么里面的ref沒(méi)有在setup函數(shù)中使用return暴露出去呢？還有在return對(duì)象中是如何將title、format識(shí)別為訪問(wèn)器屬性呢？

在接下來(lái)的文章中我會(huì)逐一解答這些問(wèn)題。

compileScript函數(shù)

在之前的 通過(guò)debug搞清楚.vue文件怎么變成.js文件文章中已經(jīng)講過(guò)了vue的script模塊中的內(nèi)容是由@vue/compiler-sfc包中的compileScript函數(shù)處理的，當(dāng)然你沒(méi)看過(guò)那篇文章也不會(huì)影響這篇文章的閱讀。

首先我們需要啟動(dòng)一個(gè)debug終端。這里以vscode舉例，打開(kāi)終端然后點(diǎn)擊終端中的+號(hào)旁邊的下拉箭頭，在下拉中點(diǎn)擊Javascript Debug Terminal就可以啟動(dòng)一個(gè)debug終端。

圖片

然后在node_modules中找到vue/compiler-sfc包的compileScript函數(shù)打上斷點(diǎn)，compileScript函數(shù)位置在/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js。接下來(lái)我們先看看簡(jiǎn)化后的compileScript函數(shù)源碼。

簡(jiǎn)化后的compileScript函數(shù)

在debug終端上面執(zhí)行yarn dev后在瀏覽器中打開(kāi)對(duì)應(yīng)的頁(yè)面，比如：http://localhost:5173/ 。此時(shí)斷點(diǎn)就會(huì)走到compileScript函數(shù)中，在我們這個(gè)場(chǎng)景中簡(jiǎn)化后的compileScript函數(shù)代碼如下：

function compileScript(sfc, options) {
  // ---- 第一部分 ----
  // 根據(jù)<script setup>中的內(nèi)容生成一個(gè)ctx上下文對(duì)象
  // 在ctx上下文對(duì)象中擁有一些屬性和方法
  const ctx = new ScriptCompileContext(sfc, options);
  const { source, filename } = sfc;
  // 頂層聲明的變量、函數(shù)組成的對(duì)象
  const setupBindings = Object.create(null);
  // script標(biāo)簽中的內(nèi)容開(kāi)始位置和結(jié)束位置
  const startOffset = ctx.startOffset;
  const endOffset = ctx.endOffset;
  // script setup中的內(nèi)容編譯成的AST抽象語(yǔ)法樹(shù)
  const scriptSetupAst = ctx.scriptSetupAst;

  // ---- 第二部分 ----
  // 遍歷<script setup>中的內(nèi)容，處理里面的import語(yǔ)句、頂層變量、函數(shù)、類、枚舉聲明還有宏函數(shù)
  for (const node of scriptSetupAst.body) {
    if (node.type === "ImportDeclaration") {
      // ...省略
    }
  }
  for (const node of scriptSetupAst.body) {
    if (
      (node.type === "VariableDeclaration" ||
        node.type === "FunctionDeclaration" ||
        node.type === "ClassDeclaration" ||
        node.type === "TSEnumDeclaration") &&
      !node.declare
    ) {
      // 頂層聲明的變量、函數(shù)、類、枚舉聲明組成的setupBindings對(duì)象
      // 給setupBindings對(duì)象賦值，{msg: 'setup-ref'}
      // 頂層聲明的變量組成的setupBindings對(duì)象
      walkDeclaration(
        "scriptSetup",
        node,
        setupBindings,
        vueImportAliases,
        hoistStatic
      );
    }
  }

  // ---- 第三部分 ----
  // 移除template中的內(nèi)容和script的開(kāi)始標(biāo)簽
  ctx.s.remove(0, startOffset);
  // 移除style中的內(nèi)容和script的結(jié)束標(biāo)簽
  ctx.s.remove(endOffset, source.length);

  // ---- 第四部分 ----
  // 將<script setup>中的頂層綁定的元數(shù)據(jù)存儲(chǔ)到ctx.bindingMetadata對(duì)象中
  // 為什么要多此一舉存儲(chǔ)一個(gè)bindingMetadata對(duì)象呢？答案是setup的return的對(duì)象有時(shí)會(huì)直接返回頂層變量，有時(shí)會(huì)返回變量的get方法，有時(shí)會(huì)返回變量的get和set方法，
  // 所以才需要一個(gè)bindingMetadata對(duì)象來(lái)存儲(chǔ)這些頂層綁定的元數(shù)據(jù)。
  for (const [key, { isType, imported, source: source2 }] of Object.entries(
    ctx.userImports
  )) {
    if (isType) continue;
    ctx.bindingMetadata[key] =
      imported === "*" ||
      (imported === "default" && source2.endsWith(".vue")) ||
      source2 === "vue"
        ? "setup-const"
        : "setup-maybe-ref";
  }
  for (const key in setupBindings) {
    ctx.bindingMetadata[key] = setupBindings[key];
  }
  // 生成setup方法的args參數(shù);
  let args = `__props`;
  const destructureElements =
    ctx.hasDefineExposeCall || !options.inlineTemplate
      ? [`expose: __expose`]
      : [];
  if (destructureElements.length) {
    args += `, { ${destructureElements.join(", ")} }`;
  }

  // ---- 第五部分 ----
  // 根據(jù)<script setup>中的頂層綁定生成return對(duì)象中的內(nèi)容
  let returned;
  const allBindings = {
    ...setupBindings,
  };
  for (const key in ctx.userImports) {
    // 不是引入ts中的類型并且import導(dǎo)入的變量還需要在template中使用
    if (!ctx.userImports[key].isType && ctx.userImports[key].isUsedInTemplate) {
      allBindings[key] = true;
    }
  }
  returned = `{ `;
  for (const key in allBindings) {
    if (
      allBindings[key] === true &&
      ctx.userImports[key].source !== "vue" &&
      !ctx.userImports[key].source.endsWith(".vue")
    ) {
      returned += `get ${key}() { return ${key} }, `;
    } else if (ctx.bindingMetadata[key] === "setup-let") {
      const setArg = key === "v" ? `_v` : `v`;
      returned += `get ${key}() { return ${key} }, set ${key}(${setArg}) { ${key} = ${setArg} }, `;
    } else {
      returned += `${key}, `;
    }
  }
  returned = returned.replace(/, $/, "") + ` }`;
  ctx.s.appendRight(
    endOffset,
    `
const __returned__ = ${returned}
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })
return __returned__
}
`
  );

  // ---- 第六部分 ----
  // 生成setup函數(shù)
  ctx.s.prependLeft(
    startOffset,
    `
${genDefaultAs} /*#__PURE__*/${ctx.helper(
      `defineComponent`
    )}({${def}${runtimeOptions}
${hasAwait ? `async ` : ``}setup(${args}) {
${exposeCall}`
  );
  ctx.s.appendRight(endOffset, `})`);

  // ---- 第七部分 ----
  // 插入import vue語(yǔ)句
  if (ctx.helperImports.size > 0) {
    ctx.s.prepend(
      `import { ${[...ctx.helperImports]
        .map((h) => `${h} as _${h}`)
        .join(", ")} } from 'vue'
`
    );
  }

  return {
    // ...省略
    bindings: ctx.bindingMetadata,
    imports: ctx.userImports,
    content: ctx.s.toString(),
  };
}

首先我們來(lái)看看compileScript函數(shù)的第一個(gè)參數(shù)sfc對(duì)象，在之前的文章 vue文件是如何編譯為js文件 中我們已經(jīng)講過(guò)了sfc是一個(gè)descriptor對(duì)象，descriptor對(duì)象是由vue文件編譯來(lái)的。

descriptor對(duì)象擁有template屬性、scriptSetup屬性、style屬性，分別對(duì)應(yīng)vue文件的<template>模塊、<script setup>模塊、<style>模塊。

在我們這個(gè)場(chǎng)景只關(guān)注scriptSetup屬性，sfc.scriptSetup.content的值就是<script setup>模塊中code代碼字符串，

sfc.source的值就是vue文件中的源代碼code字符串。sfc.scriptSetup.loc.start.offset為<script setup>中內(nèi)容開(kāi)始位置，sfc.scriptSetup.loc.end.offset為<script setup>中內(nèi)容結(jié)束位置。詳情查看下圖：

圖片

我們?cè)賮?lái)看compileScript函數(shù)中的內(nèi)容，在compileScript函數(shù)中包含了從<script setup>語(yǔ)法糖到setup函數(shù)的完整流程。乍一看可能比較難以理解，所以我將其分為七塊。

• 根據(jù)<script setup>中的內(nèi)容生成一個(gè)ctx上下文對(duì)象。
• 遍歷<script setup>中的內(nèi)容，處理里面的import語(yǔ)句、頂層變量、頂層函數(shù)、頂層類、頂層枚舉聲明等。
• 移除template和style中的內(nèi)容，以及script的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽。
• 將<script setup>中的頂層綁定的元數(shù)據(jù)存儲(chǔ)到ctx.bindingMetadata對(duì)象中。
• 根據(jù)<script setup>中的頂層綁定生成return對(duì)象。
• 生成setup函數(shù)定義
• 插入import vue語(yǔ)句

在接下來(lái)的文章中我將逐個(gè)分析這七塊的內(nèi)容。

生成ctx上下文對(duì)象

我們來(lái)看第一塊的代碼，如下：

// 根據(jù)<script setup>中的內(nèi)容生成一個(gè)ctx上下文對(duì)象
// 在ctx上下文對(duì)象中擁有一些屬性和方法
const ctx = new ScriptCompileContext(sfc, options);
const { source, filename } = sfc;
// 頂層聲明的變量、函數(shù)組成的對(duì)象
const setupBindings = Object.create(null);
// script標(biāo)簽中的內(nèi)容開(kāi)始位置和結(jié)束位置
const startOffset = ctx.startOffset;
const endOffset = ctx.endOffset;
// script setup中的內(nèi)容編譯成的AST抽象語(yǔ)法樹(shù)
const scriptSetupAst = ctx.scriptSetupAst;

在這一塊的代碼中主要做了一件事，使用ScriptCompileContext構(gòu)造函數(shù)new了一個(gè)ctx上下文對(duì)象。在之前的 為什么defineProps宏函數(shù)不需要從vue中import導(dǎo)入？文章中我們已經(jīng)講過(guò)了ScriptCompileContext構(gòu)造函數(shù)里面的具體代碼，這篇文章就不贅述了。

本文只會(huì)講用到的ScriptCompileContext類中的startOffset、endOffset、scriptSetupAst、userImports、helperImports、bindingMetadata、s等屬性。

• startOffset、endOffset屬性是在ScriptCompileContext類的constructor構(gòu)造函數(shù)中賦值的。其實(shí)就是sfc.scriptSetup.loc.start.offset和sfc.scriptSetup.loc.end.offset，<script setup>中內(nèi)容開(kāi)始位置和<script setup>中內(nèi)容結(jié)束位置，只是將這兩個(gè)字段塞到ctx上下文中。
• scriptSetupAst是在ScriptCompileContext類的constructor構(gòu)造函數(shù)中賦值的，他是<script setup>模塊的代碼轉(zhuǎn)換成的AST抽象語(yǔ)法樹(shù)。在ScriptCompileContext類的constructor構(gòu)造函數(shù)中會(huì)調(diào)用@babel/parser包的parse函數(shù)，以<script setup>中的code代碼字符串為參數(shù)生成AST抽象語(yǔ)法樹(shù)。
• userImports在new一個(gè)ctx上下文對(duì)象時(shí)是一個(gè)空對(duì)象，用于存儲(chǔ)import導(dǎo)入的頂層綁定內(nèi)容。
• helperImports同樣在new一個(gè)ctx上下文對(duì)象時(shí)是一個(gè)空對(duì)象，用于存儲(chǔ)需要從vue中import導(dǎo)入的函數(shù)。
• bindingMetadata同樣在new一個(gè)ctx上下文對(duì)象時(shí)是一個(gè)空對(duì)象，用于存儲(chǔ)所有的import頂層綁定和變量頂層綁定的元數(shù)據(jù)。
• s屬性是在ScriptCompileContext類的constructor構(gòu)造函數(shù)中賦值的，以vue文件中的源代碼code字符串為參數(shù)new了一個(gè)MagicString對(duì)象賦值給s屬性。

magic-string是由svelte的作者寫的一個(gè)庫(kù)，用于處理字符串的JavaScript庫(kù)。它可以讓你在字符串中進(jìn)行插入、刪除、替換等操作，并且能夠生成準(zhǔn)確的sourcemap。

MagicString對(duì)象中擁有toString、remove、prependLeft、appendRight等方法。s.toString用于生成返回的字符串，我們來(lái)舉幾個(gè)例子看看這幾個(gè)方法你就明白了。

s.remove( start, end )用于刪除從開(kāi)始到結(jié)束的字符串：

const s = new MagicString('hello word');
s.remove(0, 6);
s.toString(); // 'word'

s.prependLeft( index, content )用于在指定index的前面插入字符串：

const s = new MagicString('hello word');
s.prependLeft(5, 'xx');
s.toString(); // 'helloxx word'

s.appendRight( index, content )用于在指定index的后面插入字符串：

const s = new MagicString('hello word');
s.appendRight(5, 'xx');
s.toString(); // 'helloxx word'

除了上面說(shuō)的那幾個(gè)屬性，在這里定義了一個(gè)setupBindings變量。初始值是一個(gè)空對(duì)象，用于存儲(chǔ)頂層聲明的變量、函數(shù)等。

遍歷

將斷點(diǎn)走到第二部分，代碼如下：

for (const node of scriptSetupAst.body) {
  if (node.type === "ImportDeclaration") {
    // ...省略
  }
}

for (const node of scriptSetupAst.body) {
  if (
    (node.type === "VariableDeclaration" ||
      node.type === "FunctionDeclaration" ||
      node.type === "ClassDeclaration" ||
      node.type === "TSEnumDeclaration") &&
    !node.declare
  ) {
    // 頂層聲明的變量、函數(shù)、類、枚舉聲明組成的setupBindings對(duì)象
    // 給setupBindings對(duì)象賦值，{msg: 'setup-ref'}
    // 頂層聲明的變量組成的setupBindings對(duì)象
    walkDeclaration(
      "scriptSetup",
      node,
      setupBindings,
      vueImportAliases,
      hoistStatic
    );
  }
}

在這一部分的代碼中使用for循環(huán)遍歷了兩次scriptSetupAst.body，scriptSetupAst.body為script中的代碼對(duì)應(yīng)的AST抽象語(yǔ)法樹(shù)中body的內(nèi)容，如下圖：

圖片

從上圖中可以看到scriptSetupAst.body數(shù)組有6項(xiàng)，分別對(duì)應(yīng)的是script模塊中的6塊代碼。

第一個(gè)for循環(huán)中使用if判斷node.type === "ImportDeclaration"，也就是判斷是不是import語(yǔ)句。如果是import語(yǔ)句，那么import的內(nèi)容肯定是頂層綁定，需要將import導(dǎo)入的內(nèi)容存儲(chǔ)到ctx.userImports對(duì)象中。注：后面會(huì)專門寫一篇文章來(lái)講如何收集所有的import導(dǎo)入。

通過(guò)這個(gè)for循環(huán)已經(jīng)將所有的import導(dǎo)入收集到了ctx.userImports對(duì)象中了，在debug終端看看此時(shí)的ctx.userImports，如下圖：

圖片

從上圖中可以看到在ctx.userImports中收集了三個(gè)import導(dǎo)入，分別是Child組件、format函數(shù)、ref函數(shù)。

在里面有幾個(gè)字段需要注意，isUsedInTemplate表示當(dāng)前import導(dǎo)入的東西是不是在template中使用，如果為true那么就需要將這個(gè)import導(dǎo)入塞到return對(duì)象中。

isType表示當(dāng)前import導(dǎo)入的是不是type類型，因?yàn)樵趖s中是可以使用import導(dǎo)入type類型，很明顯type類型也不需要塞到return對(duì)象中。

我們?cè)賮?lái)看第二個(gè)for循環(huán)，同樣也是遍歷scriptSetupAst.body。如果當(dāng)前是變量定義、函數(shù)定義、類定義、ts枚舉定義，這四種類型都屬于頂層綁定（除了import導(dǎo)入以外就只有這四種頂層綁定了）。需要調(diào)用walkDeclaration函數(shù)將這四種頂層綁定收集到setupBindings對(duì)象中。

從前面的scriptSetupAst.body圖中可以看到if模塊的type為IfStatement，明顯不屬于上面的這四種類型，所以不會(huì)執(zhí)行walkDeclaration函數(shù)將里面的innerContent變量收集起來(lái)后面再塞到return對(duì)象中。這也就解釋了為什么非頂層綁定不能在template中直接使用。

我們?cè)赿ebug終端來(lái)看看執(zhí)行完第二個(gè)for循環(huán)后setupBindings對(duì)象是什么樣的，如下圖：

從上圖中可以看到在setupBindings對(duì)象中收集msg和title這兩個(gè)頂層變量。其中的setup-ref表示當(dāng)前變量是一個(gè)ref定義的變量，setup-let表示當(dāng)前變量是一個(gè)let定義的變量。

移除template模塊和style模塊

接著將斷點(diǎn)走到第三部分，代碼如下：

ctx.s.remove(0, startOffset);
ctx.s.remove(endOffset, source.length);

這塊代碼很簡(jiǎn)單，startOffset為<script setup>中的內(nèi)容開(kāi)始位置，endOffset為<script setup>中的內(nèi)容結(jié)束位置，ctx.s.remove方法為刪除字符串。

所以ctx.s.remove(0, startOffset)的作用是：移除template中的內(nèi)容和script的開(kāi)始標(biāo)簽。

ctx.s.remove(endOffset, source.length)的作用是：移除style中的內(nèi)容和script的結(jié)束標(biāo)簽。

我們?cè)赿ebug終端看看執(zhí)行這兩個(gè)remove方法之前的code代碼字符串是什么樣的，如下圖：

從上圖中可以看到此時(shí)的code代碼字符串和我們?cè)创a差不多，唯一的區(qū)別就是那幾個(gè)import導(dǎo)入已經(jīng)被提取到script標(biāo)簽外面去了（這個(gè)是在前面第一個(gè)for循環(huán)處理import導(dǎo)入的時(shí)候處理的）。

將斷點(diǎn)走到執(zhí)行完這兩個(gè)remove方法之后，在debug終端看看此時(shí)的code代碼字符串，如下圖：

圖片

從上圖中可以看到執(zhí)行這兩個(gè)remove方法后template模塊、style模塊（雖然本文demo中沒(méi)有寫style模塊）、script開(kāi)始標(biāo)簽、script結(jié)束標(biāo)簽都已經(jīng)被刪除了。唯一剩下的就是script模塊中的內(nèi)容，還有之前提出去的那幾個(gè)import導(dǎo)入。

將頂層綁定的元數(shù)據(jù)存儲(chǔ)到ctx.bindingMetadata

接著將斷點(diǎn)走到第四部分，代碼如下：

for (const [key, { isType, imported, source: source2 }] of Object.entries(
  ctx.userImports
)) {
  if (isType) continue;
  ctx.bindingMetadata[key] =
    imported === "*" ||
    (imported === "default" && source2.endsWith(".vue")) ||
    source2 === "vue"
      ? "setup-const"
      : "setup-maybe-ref";
}

for (const key in setupBindings) {
  ctx.bindingMetadata[key] = setupBindings[key];
}

// 生成setup函數(shù)的args參數(shù);
let args = `__props`;
const destructureElements =
  ctx.hasDefineExposeCall || !options.inlineTemplate
    ? [`expose: __expose`]
    : [];
if (destructureElements.length) {
  args += `, { ${destructureElements.join(", ")} }`;
}

上面的代碼主要分為三塊，第一塊為for循環(huán)遍歷前面收集到的ctx.userImports對(duì)象。這個(gè)對(duì)象里面收集的是所有的import導(dǎo)入，將所有import導(dǎo)入塞到ctx.bindingMetadata對(duì)象中。

第二塊也是for循環(huán)遍歷前面收集的setupBindings對(duì)象，這個(gè)對(duì)象里面收集的是頂層聲明的變量、函數(shù)、類、枚舉，同樣的將這些頂層綁定塞到ctx.bindingMetadata對(duì)象中。

為什么要多此一舉存儲(chǔ)一個(gè)ctx.bindingMetadata對(duì)象呢？

答案是setup的return的對(duì)象有時(shí)會(huì)直接返回頂層變量（比如demo中的msg常量）。有時(shí)只會(huì)返回變量的訪問(wèn)器屬性 get（比如demo中的format函數(shù)）。有時(shí)會(huì)返回變量的訪問(wèn)器屬性 get和set（比如demo中的title變量）。所以才需要一個(gè)ctx.bindingMetadata對(duì)象來(lái)存儲(chǔ)這些頂層綁定的元數(shù)據(jù)。

將斷點(diǎn)走到執(zhí)行完這兩個(gè)for循環(huán)的地方，在debug終端來(lái)看看此時(shí)收集的ctx.bindingMetadata對(duì)象是什么樣的，如下圖：

圖片

最后一塊代碼也很簡(jiǎn)單進(jìn)行字符串拼接生成setup函數(shù)的參數(shù)，第一個(gè)參數(shù)為組件的props、第二個(gè)參數(shù)為expose方法組成的對(duì)象。如下圖：

圖片

生成return對(duì)象

接著將斷點(diǎn)走到第五部分，代碼如下：

let returned;
const allBindings = {
  ...setupBindings,
};
for (const key in ctx.userImports) {
  // 不是引入ts中的類型并且import導(dǎo)入的變量還需要在template中使用
  if (!ctx.userImports[key].isType && ctx.userImports[key].isUsedInTemplate) {
    allBindings[key] = true;
  }
}

returned = `{ `;
for (const key in allBindings) {
  if (
    allBindings[key] === true &&
    ctx.userImports[key].source !== "vue" &&
    !ctx.userImports[key].source.endsWith(".vue")
  ) {
    returned += `get ${key}() { return ${key} }, `;
  } else if (ctx.bindingMetadata[key] === "setup-let") {
    const setArg = key === "v" ? `_v` : `v`;
    returned += `get ${key}() { return ${key} }, set ${key}(${setArg}) { ${key} = ${setArg} }, `;
  } else {
    returned += `${key}, `;
  }
}
returned = returned.replace(/, $/, "") + ` }`;

ctx.s.appendRight(
  endOffset,
  `
  const __returned__ = ${returned}
  Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true })
  return __returned__
  }
  `
);

這部分的代碼看著很多，其實(shí)邏輯也非常清晰，我也將其分為三塊。

在第一塊中首先使用擴(kuò)展運(yùn)算符...setupBindings將setupBindings對(duì)象中的屬性合并到allBindings對(duì)象中，因?yàn)閟etupBindings對(duì)象中存的頂層聲明的變量、函數(shù)、類、枚舉都需要被return出去。

然后遍歷ctx.userImports對(duì)象，前面講過(guò)了ctx.userImports對(duì)象中存的是所有的import導(dǎo)入（包括從vue中import導(dǎo)入ref函數(shù)）。在循環(huán)里面執(zhí)行了if判斷!ctx.userImports[key].isType && ctx.userImports[key].isUsedInTemplate，這個(gè)判斷的意思是如果當(dāng)前import導(dǎo)入的不是ts的type類型并且import導(dǎo)入的內(nèi)容在template模版中使用了。才會(huì)去執(zhí)行allBindings[key] = true，執(zhí)行后就會(huì)將滿足條件的import導(dǎo)入塞到allBindings對(duì)象中。

后面生成setup函數(shù)的return對(duì)象就是通過(guò)遍歷這個(gè)allBindings對(duì)象實(shí)現(xiàn)的。這也就解釋了為什么從vue中import導(dǎo)入的ref函數(shù)也是頂層綁定，為什么他沒(méi)有被setup函數(shù)返回。因?yàn)橹挥性趖emplate中使用的import導(dǎo)入頂層綁定才會(huì)被setup函數(shù)返回。

將斷點(diǎn)走到遍歷ctx.userImports對(duì)象之后，在debug終端來(lái)看看此時(shí)的allBindings對(duì)象是什么樣的，如下圖：

圖片

從上圖中可以看到此時(shí)的allBindings對(duì)象中存了四個(gè)需要return的頂層綁定。

接著就是執(zhí)行for循環(huán)遍歷allBindings對(duì)象生成return對(duì)象的字符串，這循環(huán)中有三個(gè)if判斷條件。我們先來(lái)看第一個(gè)，代碼如下：

if (
  allBindings[key] === true &&
  ctx.userImports[key].source !== "vue" &&
  !ctx.userImports[key].source.endsWith(".vue")
) {
  returned += `get ${key}() { return ${key} }, `;
}

if條件判斷是：如果當(dāng)前import導(dǎo)入不是從vue中，并且也不是import導(dǎo)入一個(gè)vue組件。那么就給return一個(gè)只擁有g(shù)et的訪問(wèn)器屬性，對(duì)應(yīng)我們demo中的就是import { format } from "./util.js"中的format函數(shù)。

我們?cè)賮?lái)看第二個(gè)else if判斷，代碼如下：

else if (ctx.bindingMetadata[key] === "setup-let") {
  const setArg = key === "v" ? `_v` : `v`;
  returned += `get ${key}() { return ${key} }, set ${key}(${setArg}) { ${key} = ${setArg} }, `;
}

這個(gè)else if條件判斷是：如果當(dāng)前頂層綁定是一個(gè)let定義的變量。那么就給return一個(gè)同時(shí)擁有g(shù)et和set的訪問(wèn)器屬性，對(duì)應(yīng)我們demo中的就是let title"變量。

最后就是else，代碼如下：

else {
  returned += `${key}, `;
}

這個(gè)else中就是普通的數(shù)據(jù)屬性了，對(duì)應(yīng)我們demo中的就是msg變量和Child組件。

將斷點(diǎn)走到生成return對(duì)象之后，在debug終端來(lái)看看此時(shí)生成的return對(duì)象是什么樣的，如下圖：

從上圖中可以看到此時(shí)已經(jīng)生成了return對(duì)象啦。

前面我們只生成了return對(duì)象，但是還沒(méi)將其插入到要生成的code字符串中，所以需要執(zhí)行ctx.s.appendRight方法在末尾插入return的代碼。

將斷點(diǎn)走到執(zhí)行完ctx.s.appendRight方法后，在debug終端來(lái)看看此時(shí)的code代碼字符串是什么樣的，如下圖：

圖片

從上圖中可以看到此時(shí)的code代碼字符串中多了一塊return的代碼。

生成setup函數(shù)定義

接著將斷點(diǎn)走到第六部分，代碼如下：

ctx.s.prependLeft(
  startOffset,
  `
${genDefaultAs} /*#__PURE__*/${ctx.helper(
    `defineComponent`
  )}({${def}${runtimeOptions}
${hasAwait ? `async ` : ``}setup(${args}) {
${exposeCall}`
);
ctx.s.appendRight(endOffset, `})`);

這部分的代碼很簡(jiǎn)單，調(diào)用ctx.s.prependLeft方法從左邊插入一串代碼。插入的這串代碼就是簡(jiǎn)單的字符串拼接，我們?cè)赿ebug終端來(lái)看看要插入的代碼是什么樣的，如下圖：

圖片

是不是覺(jué)得上面這塊需要插入的代碼看著很熟悉，他就是編譯后的_sfc_main對(duì)象除去setup函數(shù)內(nèi)容的部分。將斷點(diǎn)走到ctx.s.appendRight方法執(zhí)行之后，再來(lái)看看此時(shí)的code代碼字符串是什么樣的，如下圖：

圖片

從上圖中可以看到此時(shí)的setup函數(shù)基本已經(jīng)生成完了。

插入import vue語(yǔ)句

上一步生成的code代碼字符串其實(shí)還有一個(gè)問(wèn)題，在代碼中使用了_defineComponent函數(shù)，但是沒(méi)有從任何地方去import導(dǎo)入。

第七塊的代碼就會(huì)生成缺少的import導(dǎo)入，代碼如下：

if (ctx.helperImports.size > 0) {
  ctx.s.prepend(
    `import { ${[...ctx.helperImports]
      .map((h) => `${h} as _${h}`)
      .join(", ")} } from 'vue'
`
  );
}

將斷點(diǎn)走到ctx.s.prepend函數(shù)執(zhí)行后，再來(lái)看看此時(shí)的code代碼字符串，如下圖：

圖片

從上圖中可以看到已經(jīng)生成了完整的setup函數(shù)啦。

總結(jié)

整個(gè)流程圖如下：

圖片

• 遍歷<script setup>中的代碼將所有的import導(dǎo)入收集到ctx.userImports對(duì)象中。
• 遍歷<script setup>中的代碼將所有的頂層變量、函數(shù)、類、枚舉收集到setupBindings對(duì)象中。
• 調(diào)用ctx.s.remove方法移除template、style模塊以及script開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽。
• 遍歷前面收集的ctx.userImports和setupBindings對(duì)象，將所有的頂層綁定元數(shù)據(jù)存儲(chǔ)到bindingMetadata對(duì)象中。
• 遍歷前面收集的ctx.userImports和setupBindings對(duì)象，生成return對(duì)象中的內(nèi)容。在這一步的時(shí)候會(huì)將沒(méi)有在template中使用的import導(dǎo)入給過(guò)濾掉，這也就解釋了為什么從vue中導(dǎo)入的ref函數(shù)不包含在return對(duì)象中。
• 調(diào)用ctx.s.prependLeft方法生成setup的函數(shù)定義。
• 調(diào)用ctx.s.prepend方法生成完整的setup函數(shù)。