Vue 3 的 setup語法糖到底是什麼東西？

前端欧阳發表於2024-02-26
Vue

前言

我們每天寫vue3專案的時候都會使用setup語法糖，但是你有沒有思考過下面幾個問題。setup語法糖經過編譯後是什麼樣子的？為什麼在setup頂層定義的變數可以在template中可以直接使用？為什麼import一個元件後就可以直接使用，無需使用components 選項來顯式註冊元件？

vue 檔案如何渲染到瀏覽器上

要回答上面的問題，我們先來了解一下從一個vue檔案到渲染到瀏覽器這一過程經歷了什麼？

我們的vue程式碼一般都是寫在字尾名為vue的檔案上，顯然瀏覽器是不認識vue檔案的，瀏覽器只認識html、css、jss等檔案。所以第一步就是透過webpack或者vite將一個vue檔案編譯為一個包含render函式的js檔案。然後執行render函式生成虛擬DOM，再呼叫瀏覽器的DOM API根據虛擬DOM生成真實DOM掛載到瀏覽器上。

setup編譯後的樣子

在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 /* TEXT */
        ),
        _createVNode($setup["Child"]),
      ],
      64 /* STABLE_FRAGMENT */
    )
  );
}
__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 /* TEXT */
        ),
        _createVNode($setup["Child"]),
      ],
      64 /* STABLE_FRAGMENT */
    )
  );
}

我們這次主要看在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原始碼搞清楚是如何呼叫render函式

有的小夥伴看到這裡需要看原始碼就覺得頭大了，彆著急，其實很簡單，我會一步一步的帶著你去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執行會的返回值賦值到vue例項的setupState屬性上。

看到這裡我們整個流程已經可以串起來了，首先會執行由setup語法糖編譯後的setup函式。然後將setup函式中由頂層變數和import匯入組成的返回值物件賦值給vue例項的setupState屬性，然後執行render函式的時候從vue例項中取出setupState屬性也就是setup的返回值。這樣在render函式也就是template模版就可以訪問到setup中的頂層變數和import匯入。

現在我們可以回答前面提的另外兩個問題了：

為什麼在setup頂層定義的變數可以在template中可以直接使用？

因為在setup語法糖頂層定義的變數經過編譯後會被加入到setup函式返回值物件__returned__中，而非setup頂層定義的變數不會加入到__returned__物件中。setup函式返回值會被塞到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函式返回值塞到vue例項的setupState屬性上。執行render函式的時候會將vue例項上的setupState屬性（也就是setup函式的返回值）傳遞給render函式，所以在render函式中就可以訪問到setup頂層定義的變數和import匯入。而render函式實際就是由template編譯得來的，所以說在template中就可以訪問到setup頂層定義的變數和import匯入。

關注公眾號：【前端歐陽】，解鎖我更多vue乾貨文章，並且可以免費向我諮詢vue相關問題。
qrcode

相關文章