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

来源:https://www.cnblogs.com/heavenYJJ/p/18032347
-Advertisement-
Play Games

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


前言

我們每天寫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導入。

如果我的文章對你有點幫助，歡迎關註公眾號：【歐陽碼農】，文章在公眾號首發。你的支持就是我創作的最大動力，感謝感謝！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql access denied for root ... mysqld –skip-grant-tables 命令失效 ... Failed to find valid data directory
    <!-- 密碼突然登錄不上MySQL了，久了也不曉得是不是密碼不正確...只能改密碼...一年難得碰一次，感覺每次總有莫名其妙的問題 --> <!-- 修改方案只找到一個，就是無密碼驗證開啟mysql服務，然後登錄，設置新密碼 --> <!-- mysql版本不同有些命令無效，大概分高低兩版本 -- ...
  • MySQL必知必會
    一、Mysql 1、什麼是資料庫？ (1)資料庫（database） 資料庫是保存有組織的數據的容器（通常是一個文件或一組文件），資料庫是DBMS(資料庫管理系統或資料庫軟體)創建和操作的容器； （2）表、列、行、主鍵、數據類型分別是什麼 ①表：表是由某些特定的欄位組成的統一的結構化的存儲數據的容器 ...
  • Docker啟動Aserospike
    Docker安裝Aseropike 找了一大堆，發現Aserospike的資料太少了（主要是官方文檔，好像沒有中文的） 看了很多的安裝部署，一直不滿意，於是直接上Docker。這樣就簡單多了。 Docker安裝 我看很多人都直接在Docker服務，但是最簡單的還是直接下載Docker Desktop ...
  • 袋鼠雲產品功能更新報告09期｜更全面，更多樣，更高效
    歡迎閱讀袋鼠雲09期產品功能更新報告。在此期報告中，我們秉持創新與優化並重的理念，對產品進行了深度打磨與全面升級。每一處細節的改進，都是我們對卓越品質的不懈追求，期待這些新功能能助力您的業務運營與發展，讓數字化轉型之路更加暢通無阻。 以下為袋鼠雲產品功能更新報告09期內容，更多探索，請繼續閱讀。 離 ...
  • AP引擎助力加速生產環境運行
    Rapid存儲引擎簡介 從GreatSQL 8.0.32-25版本開始，新增Rapid存儲引擎，該引擎使得GreatSQL能滿足聯機分析（OLAP）查詢請求。 Rapid引擎採用插件（Plugin）方式嵌入GreatSQL中，可以線上動態安裝或卸載。 Rapid引擎不會直接面對客戶端和應用程式，用戶 ...
  • 雲資料庫實現架構與設計的構想
    隨著雲計算技術的飛速發展，雲資料庫作為雲計算的重要組成部分，其實現架構與設計日益受到開發工程師的關註。本文將從開發工程師的角度出發，探討雲資料庫的實現架構，並提出雲資料庫設計的構想，以期為雲資料庫的發展提供參考。 ...
  • NAVICAT 162以下版本使用
    Linux下MySQL的安裝與使用 安裝前說明 查看是否安裝過MySQL 如果你是用rpm安裝, 檢查一下RPM PACKAGE： rpm -qa | grep -i mysql # -i 忽略大小寫 檢查mysql service： systemctl status mysqld.service ...
  • 一個支持Sora模型文本生成視頻的Web客戶端
    大家好，我是 Java陳序員。 最近 Open AI 又火了一把，其新推出的文本生成視頻模型 —— Sora,引起了巨大的關註。 Sora 目前僅僅只是發佈預告視頻，還未開放出具體的 API. 今天，給大家推薦一個最近十分火熱的開源項目，一個支持使用 Sora 模型將文本生成視頻的 Web 客戶端。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類