言

在今年的Vue Conf 2024大會上，沈青川大佬（維護Vue/Vite 中文文檔）在會上介紹了他的新項目Vue Vine。Vue Vine提供了全新Vue組件書寫方式，主要的賣點是可以在一個文件里面寫多個vue組件。相信你最近應該看到了不少介紹Vue Vine的文章，這篇文章我們另辟蹊徑來講講Vue Vine是如何實現在一個文件里面寫多個vue組件。

看個demo

我們先來看普通的vue組件，about.vue代碼如下：

<template>
  <h3>i am about page</h3>
</template>

<script lang="ts" setup></script>

我們在瀏覽器中來看看編譯后的js代碼，代碼如下：

const _sfc_main = {};

function _sfc_render(_ctx, _cache) {
  return _openBlock(), _createElementBlock("h3", null, "i am about page");
}

_sfc_main.render = _sfc_render;
export default _sfc_main;

從上面的代碼可以看到普通的vue組件編譯后生成的js文件會export default導出一個_sfc_main組件對象，并且這個組件對象上面有個大名鼎鼎的render函數。父組件只需要import導入子組件里面export default導出的_sfc_main組件對象就可以啦。

搞清楚普通的vue組件編譯后是什么樣的，我們接著來看一個Vue Vine的demo，Vue Vine的組件必須以.vine.ts 結尾，home.vine.ts代碼如下：

async function ChildComp() {
  return vine`
    <h3>我是子組件</h3>
  `;
}

export async function Home() {
  return vine`
  <h3>我是父組件</h3>
    <ChildComp  />
  `;
}

如果你熟悉react，你會發現Vine 組件函數和react比較相似，不同的是return的時候需要在其返回值上顯式使用 vine 標記的模板字符串。

在瀏覽器中來看看home.vine.ts編譯后的代碼，代碼如下：

export const ChildComp = (() => {
  const __vine = _defineComponent({
    name: "ChildComp",
    setup(__props, { expose: __expose }) {
      // ...省略
    },
  });

  function __sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
    return _openBlock(), _createElementBlock("h3", null, "我是子組件");
  }

  __vine.render = __sfc_render;
  return __vine;
})();

export const Home = (() => {
  const __vine = _defineComponent({
    name: "Home",
    setup(__props, { expose: __expose }) {
      // ...省略
    },
  });

  function __sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
    return (
      _openBlock(),
      _createElementBlock(
        _Fragment,
        null,
        [_hoisted_1, _createVNode($setup["ChildComp"])],
        64,
      )
    );
  }

  __vine.render = __sfc_render;
  return __vine;
})();

從上面的代碼可以看到組件ChildComp和Home編譯后是一個立即調用函數，在函數中return了__vine組件對象，并且這個組件對象上面也有render函數。想必細心的你已經發現了在同一個文件里面定義的多個組件經過編譯后，從常規的export default導出一個默認的vue組件對象變成了export導出多個具名的vue組件對象。

接下來我們將通過debug的方式帶你搞清楚Vue Vine是如何實現一個文件內導出多個vue組件對象。

createVinePlugin函數

我們遇見的第一個問題是需要找到從哪里開始著手debug？

來看一下官方文檔是接入vue vine的，如下圖：

從上圖中可以看到vine是一個vite插件，以插件的形式起作用的。

現在我們找到了一切起源就是這個VineVitePlugin函數，所以我們需要給vite.config.ts文件中的VineVitePlugin函數打個斷點。如下圖：

接下來我們需要啟動一個debug終端。這里以vscode舉例，打開終端然后點擊終端中的+號旁邊的下拉箭頭，在下拉中點擊Javascript Debug Terminal就可以啟動一個debug終端。

在debug終端執行yarn dev，在瀏覽器中打開對應的頁面，比如：http://localhost:3333/ 。此時代碼將會停留在我們打的斷點VineVitePlugin函數調用處，讓代碼走進VineVitePlugin函數，發現這個函數實際定義的名字叫createVinePlugin，在我們這個場景中簡化后的createVinePlugin函數代碼如下：

function createVinePlugin() {
  return {
    name: "vue-vine-plugin",
    async resolveId(id) {
      // ...省略
    },
    async load(id) {
      // ...省略
    },
    async transform(code, id) {
      const { fileId, query } = parseQuery(id);
      if (!fileId.endsWith(".vine.ts") || query.type === QUERY_TYPE_STYLE) {
        return;
      }
      return runCompileScript(code, id);
    },
    async handleHotUpdate(ctx) {
      // ...省略
    }
  };
}

從上面的代碼可以看到插件中有不少鉤子函數，vite會在對應的時候調用這些插件的鉤子函數，比如當vite解析每個模塊時就會調用transform等函數。

transform鉤子函數的接收的第一個參數為code，是當前文件的code代碼字符串。第二個參數為id，是當前文件路徑，這個路徑可能帶有query。

在transform鉤子函數中先調用parseQuery函數根據當前文件路徑拿到去除query的文件路徑，以及query對象。

!fileId.endsWith(".vine.ts") 的意思是判斷當前文件是不是.vine.ts結尾的文件，如果不是則不進行任何處理，這也就是為什么文檔中會寫Vue Vine只支持.vine.ts結尾的文件。

query.type === QUERY_TYPE_STYLE的意思是判斷當前文件是不是css文件，因為同一個vue文件會被處理兩次，第一次處理時只會處理template和script這兩個模塊，第二次再去單獨處理style模塊。

在transform鉤子函數的最后就是調用runCompileScript(code, id)函數，并且將其執行結果進行返回。

runCompileScript函數

接著將斷點走進runCompileScript函數，在我們這個場景中簡化后的runCompileScript函數代碼如下：

const runCompileScript = (code, fileId) => {
  const vineFileCtx = compileVineTypeScriptFile(
    code,
    fileId,
    compilerHooks,
    fileCtxMap,
  );

  return {
    code: vineFileCtx.fileMagicCode.toString(),
  };
};

從上面的代碼可以看到首先會以code（當前文件的code代碼字符串）為參數去執行compileVineTypeScriptFile函數，這個函數會返回一個vineFileCtx上下文對象。這個上下文對象的fileMagicCode.toString(),就是前面我們在瀏覽器中看到的最終編譯好的js代碼。

compileVineTypeScriptFile函數

接著將斷點走進compileVineTypeScriptFile函數，在我們這個場景中簡化后的compileVineTypeScriptFile函數代碼如下：

function compileVineTypeScriptFile(
  code: string,
  fileId: string,
  compilerHooks: VineCompilerHooks,
  fileCtxCache?: VineFileCtx,
) {
  const vineFileCtx: VineFileCtx = createVineFileCtx(
    code,
    fileId,
    fileCtxCache,
  );
  const vineCompFnDecls = findVineCompFnDecls(vineFileCtx.root);
  doAnalyzeVine(compilerHooks, vineFileCtx, vineCompFnDecls);
  transformFile(
    vineFileCtx,
    compilerHooks,
    compilerOptions?.inlineTemplate ?? true,
  );

  return vineFileCtx;
}

在執行compileVineTypeScriptFile函數之前，我們在debug終端來看看接收的第一個參數code，如下圖：

從上圖中可以看到第一個參數code就是我們寫的home.vine.ts文件中的源代碼。

createVineFileCtx函數

接下來看第一個函數調用createVineFileCtx，這個函數返回一個vineFileCtx上下文對象。將斷點走進createVineFileCtx函數，在我們這個場景中簡化后的createVineFileCtx函數代碼如下：

import MagicString from 'magic-string'

function createVineFileCtx(code: string, fileId: string) {
  const root = babelParse(code);
  const vineFileCtx: VineFileCtx = {
    root,
    fileMagicCode: new MagicString(code),
    vineCompFns: [],
    // ...省略
  };
  return vineFileCtx;
}

由于Vue Vine中的組件和react相似是組件函數，組件函數中當然全部都是js代碼。既然是js代碼那么就可以使用babel的parser函數將組件函數的js代碼編譯成AST抽象語法樹，所以第一步就是使用code去調用babel的parser函數生成AST抽象語法樹，然后賦值給root變量。

我們在debug終端來看看得到的AST抽象語法樹是什么樣的，如下圖：

從上圖中可以看到在body數組中有兩項，分別對應的就是ChildComp組件函數和Home組件函數。

接下來就是return返回一個vineFileCtx上下文對象，對象上面的幾個屬性我們需要講一下。

• root：由.vine.ts文件轉換后的AST抽象語法樹。
• vineCompFns：數組中存了文件中定義的多個vue組件，初始化時為空數組。
• fileMagicCode：是一個由magic-string庫new的一個對象，對象中存了在編譯時生成的js代碼字符串。magic-string是由svelte的作者寫的一個庫，用于處理字符串的JavaScript庫。它可以讓你在字符串中進行插入、刪除、替換等操作，在編譯時就是利用這個庫生成編譯后的js代碼。toString方法返回經過處理后的字符串，前面的runCompileScript函數中就是最終調用vineFileCtx.fileMagicCode.toString()方法返回經過編譯階段處理得到的js代碼。

findVineCompFnDecls函數

我們接著來看compileVineTypeScriptFile函數中的第二個函數調用findVineCompFnDecls：

function compileVineTypeScriptFile(
  code: string,
  fileId: string,
  compilerHooks: VineCompilerHooks,
  fileCtxCache?: VineFileCtx,
) {
  // ...省略
  const vineCompFnDecls = findVineCompFnDecls(vineFileCtx.root);
  // ...省略
}

通過前一步我們拿到了一個vineFileCtx上下文對象，vineFileCtx.root中存的是編譯后的AST抽象語法樹。

所以這一步就是調用findVineCompFnDecls函數從AST抽象語法樹中提取出在.vine.ts文件中定義的多個vue組件對象對應的Node節點。我們在debug終端來看看組件對象對應的Node節點組成的數組vineCompFnDecls，如下圖：

從上圖中可以看到數組由兩個Node節點組成，分別對應的是ChildComp組件函數和Home組件函數。

doAnalyzeVine函數

我們接著來看compileVineTypeScriptFile函數中的第三個函數調用doAnalyzeVine：

function compileVineTypeScriptFile(
  code: string,
  fileId: string,
  compilerHooks: VineCompilerHooks,
  fileCtxCache?: VineFileCtx,
) {
  // ...省略
  doAnalyzeVine(compilerHooks, vineFileCtx, vineCompFnDecls);
  // ...省略
}

經過上一步的處理我們拿到了兩個組件對象的Node節點，并且將這兩個Node節點存到了vineCompFnDecls數組中。

由于組件對象的Node節點是一個標準的AST抽象語法樹的Node節點，并不能清晰的描述一個vue組件對象。所以接下來就是調用doAnalyzeVine函數遍歷組件對象的Node節點，將其轉換為能夠清晰的描述一個vue組件的對象，將這些vue組件對象組成數組塞到vineFileCtx上下文對象的vineCompFns屬性上。

我們在debug終端來看看經過doAnalyzeVine函數處理后生成的vineFileCtx.vineCompFns屬性是什么樣的，如下圖：

從上圖中可以看到vineCompFns屬性中存的組件對象已經能夠清晰的描述一個vue組件，上面有一些我們熟悉的屬性props、slots等。

transformFile函數

我們接著來看compileVineTypeScriptFile函數中的第四個函數調用transformFile：

function compileVineTypeScriptFile(
  code: string,
  fileId: string,
  compilerHooks: VineCompilerHooks,
  fileCtxCache?: VineFileCtx,
) {
  // ...省略
  transformFile(
    vineFileCtx,
    compilerHooks,
    compilerOptions?.inlineTemplate ?? true,
  );
  // ...省略
}

經過上一步的處理后在vineFileCtx上下文對象的vineCompFns屬性數組中已經存了一系列能夠清晰描述vue組件的對象。

在前面我們講過了vineFileCtx.vineCompFns數組中存的對象能夠清晰的描述一個vue組件，但是對象中并沒有我們期望的render函數、setup函數等。

所以接下來就需要調用transformFile函數，遍歷上一步拿到的vineFileCtx.vineCompFns數組，將所有的vue組件轉換成對應的立即調用函數。在每個立即調用函數中都會return一個__vine組件對象，并且這個__vine組件對象上都有一個render屬性。

言

學習過 JavaScript 的可能會了解，JavaScript 的宿主瀏覽器只有一個線程運行 JavaScript，除了 JavaScript 的線程，瀏覽器中單個頁面還有一些其他線程，例如：UI 線程負責處理渲染 DOM 元素；GUI 線程用于處理與用戶交互的邏輯；網絡線程用于發送接收 HTTP 請求；file 線程用于讀取文件；定時器線程處理定時任務等等。

單線程原因

為什么不能像很多高級語言一樣支持多線程呢？假定 JavaScript 同時有兩個線程，一個線程在HTML中創建了一個標簽元素，另一個線程刪除了這個標簽，這時瀏覽器應該執行什么操作？瀏覽器中 JavaScript 的主要用途是操作 DOM 。這決定了它只能是單線程，否則會帶來很復雜的同步問題。為了避免復雜性，大部分主流瀏覽器的 JavaScript 運行環境只支持單線程。

JavaScript 的事件驅動

既然 JavaScript 只支持單線程，那么有人可能會好奇為什么瀏覽器中的 JavaScript 可以同時發送多個網絡請求或者執行多個事件回調函數呢？

這是因為 JavaScript 是基于事件驅動，當需要進行網絡請求時，JavaScript 線程會把請求發送給 network 線程執行，并等待執行結果；當進行文件讀取時則調用 file 線程，然后等待結果。然后 JavaScript 會一直輪詢事件庫 event loop，直到有事件完成，這時瀏覽器會驅動 JavaScript 去執行事件的回調函數。這就是 JavaScript 的事件驅動模型。

web worker誕生

單線程的最大問題是不能利用多核 CPU 的優點，HTML5 推出的 Web Worker 標準，允許 JavaScript 創建多線程，但是子線程受主線程約束，且不得操作 DOM 。所以，這個新標準不會產生多線程同步的問題。

適用場景

Web Worker 能解決傳統的 JavaScript 單線程出現的執行阻塞問題，因而適合以下幾種業務場景：

• 并行計算；
• ajax 輪詢；
• 耗時的函數執行；
• 數據預處理/加載。

函數介紹

1、創建

初始化一個 Web Worker，由于不是所有的瀏覽器都支持 Web Worker，所以需要判斷一下瀏覽器是否支持：

if (window.Worker) {//判斷瀏覽器是否支持web worker
    var worker = new Worker('test.js');//創建一個線程，參數為需要執行的JavaScript文件
}

2 、向線程傳遞參數

新的線程的上下文環境跟原宿主環境相對獨立的，所以變量作用域不同，如果需要互相讀取變量的話需要通過消息發送的方式傳輸變量，例如：

worker.postMessage('test'); //數據類型可以是字符串
worker.postMessage({method: 'echo', args: ['Work']});//數據類型可以是對象

3 、主線程接受消息

跟上述場景類似，主線程也需要通過監聽的方式獲取輔線程的消息：

worker.onmessage = function (event) {
  console.log('接收到消息： ' + event.data);
}

4 、線程加載腳本

子線程內部也可以通過函數加載其他腳本：

importScripts('script1.js','script2.js');

5 、關閉線程

// 主線程中關閉子線程
worker.terminate();
// 子線程關閉自身
self.close();

使用 JavaScript 多線程實現非阻塞全排列

1 、什么是全排列

從 n 個不同元素中任取 m（m≤n）個元素，按照一定的順序排列起來，叫做從 n 個不同元素中取出 m 個元素的一個排列。當 m=n 時所有的排列情況叫全排列。

2 、為什么使用多線程處理

這里并非突出使用 JavaScript 實現全排列的優勢，而是在實際項目中類似這種科學運算相關的算法可能會消耗一定的 CPU，由于 JavaScript 是解釋型語言，運算性能是它的弱項，而且瀏覽器中運行的 JavaScript 又是單線程的，所以一旦出現性能問題可能會導致線程阻塞，阻塞之后會導致頁面卡頓，非常影響用戶體驗。使用 webworker 的多線程功能將這個運算函數單獨 fork 出一個子線程去運行，運行完成之后發送結果給主線程，可以有效的避免性能問題。

3 、代碼示例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8">
<title>JavaScript實現全排列</title>
<script type="text/JavaScript">
function combine() {//點擊按鈕向webworker線程發送請求  
    var worker = new Worker('http://wiki-code.oss-cn-beijing.aliyuncs.com/html5/js/worker.js');
    worker.postMessage(document.getElementById("str").value);
        worker.onmessage= function (event) {                        
	        document.getElementById("result").innerHTML  =   event.data ; //監聽JavaScript線程的結果
	    };
}
</script>
</head>
<body>
    <input type="text" id="str" />
    <button onclick="combine()">全排列</button>
    結果是：<div id="result" style="width:500px;height:500px;word-break: break-all;"></div>
</body>
</html>

worker.js 代碼如下：

function getGroup(data, index = 0, group = []) {//生成全排列
    var need_apply = new Array();
    need_apply.push(data[index]);
    for(var i = 0; i < group.length; i++) {
        need_apply.push(group[i] + data[index]);
    }
    group.push.apply(group, need_apply);
    if(index + 1 >= data.length) return group;
    else return getGroup(data, index + 1, group);
}
onmessage = function(message){//監聽主線程的數據請求
    var msg = message.data;
    if(msg == "") postMessage("請輸入正確的字符串");
    else {
        var data = msg.split("");//將字符串轉數組
        postMessage(getGroup(data));
    }
}

上述代碼實現了一個使用 JavaScript 的 Web Worker 實現的全排列的功能。上半部分是主線程的代碼，主要實現了創建子線程、發送數據給子線程、接收子線程的消息這幾個功能；下半部分是子線程，子線程主要負責運算，并將運算結果發送給主線程。

總結

早期的 JavaScript 由于考慮操作 DOM 的一致性問題，以及當時的網頁沒有過多的交互所以不需要大量的計算，所以只支持單線程。這在多核 CPU 時代的劣勢愈發明顯，所以 HTML5 中推出多線程解決這個問題。回顧本章主要介紹了 Web Worker 的使用方式以及其適用場景。

更多詳細內容：https://developer.mozilla.org/zh-CN/docs/Web/API/Worker