給我5分鐘，保證教會你在vue3中動態載入遠程組件

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

前言 在一些特殊的場景中（比如低代碼、減少小程式包體積、類似於APP的熱更新），我們需要從服務端動態載入.vue文件，然後將動態載入的遠程vue組件渲染到我們的項目中。今天這篇文章我將帶你學會，在vue3中如何去動態載入遠程組件。 歐陽寫了一本開源電子書vue3編譯原理揭秘，這本書初中級前端能看懂。 ...


前言

在一些特殊的場景中（比如低代碼、減少小程式包體積、類似於APP的熱更新），我們需要從服務端動態載入.vue文件，然後將動態載入的遠程vue組件渲染到我們的項目中。今天這篇文章我將帶你學會，在vue3中如何去動態載入遠程組件。

歐陽寫了一本開源電子書vue3編譯原理揭秘，這本書初中級前端能看懂。完全免費，只求一個star。

defineAsyncComponent非同步組件

想必聰明的你第一時間就想到了defineAsyncComponent方法。我們先來看看官方對defineAsyncComponent方法的解釋：

定義一個非同步組件，它在運行時是懶載入的。參數可以是一個非同步載入函數，或是對載入行為進行更具體定製的一個選項對象。

defineAsyncComponent方法的返回值是一個非同步組件，我們可以像普通組件一樣直接在template中使用。和普通組件的區別是，只有當渲染到非同步組件時才會調用載入內部實際組件的函數。

我們先來簡單看看使用defineAsyncComponent方法的例子，代碼如下：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...從伺服器獲取組件
    resolve(/* 獲取到的組件 */)
  })
})
// ... 像使用其他一般組件一樣使用 `AsyncComp`

defineAsyncComponent方法接收一個返回 Promise 的回調函數，在Promise中我們可以從服務端獲取vue組件的code代碼字元串。然後使用resolve(/* 獲取到的組件 */)將拿到的組件傳給defineAsyncComponent方法內部處理，最後和普通組件一樣在template中使用AsyncComp組件。

從服務端獲取遠程組件

有了defineAsyncComponent方法後事情從錶面上看著就很簡單了，我們只需要寫個方法從服務端拿到vue文件的code代碼字元串，然後在defineAsyncComponent方法中使用resolve拿到的vue組件。

第一步就是本地起一個伺服器，使用伺服器返回我們的vue組件。這裡我使用的是http-server，安裝也很簡單：

npm install http-server -g

使用上面的命令就可以全局安裝一個http伺服器了。

接著我在項目的public目錄下新建一個名為remote-component.vue的文件，這個vue文件就是我們想從服務端載入的遠程組件。remote-component.vue文件中的代碼如下：

<template>
  <p>我是遠程組件</p>
  <p>
    當前遠程組件count值為：<span class="count">{{ count }}</span>
  </p>
  <button @click="count++">點擊增加遠程組件count</button>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

<style>
.count {
  color: red;
}
</style>

從上面的代碼可以看到遠程vue組件和我們平時寫的vue代碼沒什麼區別，有template、ref響應式變數、style樣式。

接著就是在終端執行http-server ./public --cors命令啟動一個本地伺服器，伺服器預設埠為8080。但是由於我們本地起的vite項目預設埠為5173，所以為了避免跨域這裡需要加--cors。 ./public的意思是指定當前目錄的public文件夾。

啟動了一個本地伺服器後，我們就可以使用 http://localhost:8080/remote-component.vue鏈接從服務端訪問遠程組件啦，如下圖：
remote-component

從上圖中可以看到在瀏覽器中訪問這個鏈接時觸發了下載遠程vue組件的操作。

defineAsyncComponent載入遠程組件

const RemoteChild = defineAsyncComponent(async () => {
  return new Promise(async (resolve) => {
    const res = await fetch("http://localhost:8080/remote-component.vue");
    const code = await res.text();
    console.log("code", code);
    resolve(code);
  });
});

接下來我們就是在defineAsyncComponent方法接收的 Promise 的回調函數中使用fetch從服務端拿到遠程組件的code代碼字元串應該就行啦，代碼如下：

同時使用console.log("code", code)打個日誌看一下從服務端過來的vue代碼。

上面的代碼看著已經完美實現動態載入遠程組件了，結果不出意外在瀏覽器中運行時報錯了。如下圖：
error

在上圖中可以看到從服務端拿到的遠程組件的代碼和我們的remote-component.vue的源代碼是一樣的，但是為什麼會報錯呢？

這裡的報錯信息顯示載入非同步組件報錯，還記得我們前面說過的defineAsyncComponent方法是在回調中resolve(/* 獲取到的組件 */)。而我們這裡拿到的code是一個組件嗎？

我們這裡拿到的code只是組件的源代碼，也就是常見的單文件組件SFC。而defineAsyncComponent中需要的是由源代碼編譯後拿的的vue組件對象，我們將組件源代碼丟給defineAsyncComponent當然會報錯了。

看到這裡有的小伙伴有疑問了，我們平時在父組件中import子組件不是也一樣在template就直接使用了嗎？

子組件local-child.vue代碼：

<template>
  <p>我是本地組件</p>
  <p>
    當前本地組件count值為：<span class="count">{{ count }}</span>
  </p>
  <button @click="count++">點擊增加本地組件count</button>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

<style>
.count {
  color: red;
}
</style>

父組件代碼：

<template>
  <LocalChild />
</template>

<script setup lang="ts">
import LocalChild from "./local-child.vue";
console.log("LocalChild", LocalChild);
</script>

上面的import導入子組件的代碼寫了這麼多年你不覺得怪怪的嗎？

按照常理來說要import導入子組件，那麼在子組件裡面肯定要寫export才可以，但是在子組件local-child.vue中我們沒有寫任何關於export的代碼。

答案是在父組件import導入子組件觸發了vue-loader或者@vitejs/plugin-vue插件的鉤子函數，在鉤子函數中會將我們的源代碼單文件組件SFC編譯成一個普通的js文件，在js文件中export default導出編譯後的vue組件對象。

這裡使用console.log("LocalChild", LocalChild)來看看經過編譯後的vue組件對象是什麼樣的，如下圖：
import-comp

從上圖可以看到經過編譯後的vue組件是一個對象，對象中有render、setup等方法。defineAsyncComponent方法接收的組件就是這樣的vue組件對象，但是我們前面卻是將vue組件源碼丟給他，當然會報錯了。

最終解決方案vue3-sfc-loader

從服務端拿到遠程vue組件源碼後，我們需要一個工具將拿到的vue組件源碼編譯成vue組件對象。幸運的是優秀的vue不光暴露出一些常見的API，而且還將一些底層API給暴露了出來。比如在@vue/compiler-sfc包中就暴露出來了compileTemplate、compileScript、compileStyleAsync等方法。

如果你看過我寫的 vue3編譯原理揭秘 開源電子書，你應該對這幾個方法覺得很熟悉。

  • compileTemplate方法：用於處理單文件組件SFC中的template模塊。

  • compileScript方法：用於處理單文件組件SFC中的script模塊。

  • compileStyleAsync方法：用於處理單文件組件SFC中的style模塊。

而vue3-sfc-loader包的核心代碼就是調用@vue/compiler-sfc包的這些方法，將我們的vue組件源碼編譯為想要的vue組件對象。
下麵這個是改為使用vue3-sfc-loader包後的代碼，如下：

import * as Vue from "vue";
import { loadModule } from "vue3-sfc-loader";

const options = {
  moduleCache: {
    vue: Vue,
  },
  async getFile(url) {
    const res = await fetch(url);
    const code = await res.text();
    return code;
  },
  addStyle(textContent) {
    const style = Object.assign(document.createElement("style"), {
      textContent,
    });
    const ref = document.head.getElementsByTagName("style")[0] || null;
    document.head.insertBefore(style, ref);
  },
};

const RemoteChild = defineAsyncComponent(async () => {
  const res = await loadModule(
    "http://localhost:8080/remote-component.vue",
    options
  );
  console.log("res", res);
  return res;
});

loadModule函數接收的第一個參數為遠程組件的URL，第二個參數為options。在options中有個getFile方法，獲取遠程組件的code代碼字元串就是在這裡去實現的。

我們在終端來看看經過loadModule函數處理後拿到的vue組件對象是什麼樣的，如下圖：
compiler-remote-comp

從上圖中可以看到經過loadModule函數的處理後就拿到來vue組件對象啦，並且這個組件對象上面也有熟悉的render函數和setup函數。其中render函數是由遠程組件的template模塊編譯而來的，setup函數是由遠程組件的script模塊編譯而來的。

看到這裡你可能有疑問，遠程組件的style模塊怎麼沒有在生成的vue組件對象上面有提現呢？

答案是style模塊編譯成的css不會塞到vue組件對象上面去，而是單獨通過options上面的addStyle方法傳回給我們了。addStyle方法接收的參數textContent的值就是style模塊編譯而來css字元串，在addStyle方法中我們是創建了一個style標簽，然後將得到的css字元串插入到頁面中。

完整父組件代碼如下：

<template>
  <LocalChild />
  <div class="divider" />
  <button @click="showRemoteChild = true">載入遠程組件</button>
  <RemoteChild v-if="showRemoteChild" />
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref, onMounted } from "vue";
import * as Vue from "vue";
import { loadModule } from "vue3-sfc-loader";
import LocalChild from "./local-child.vue";

const showRemoteChild = ref(false);

const options = {
  moduleCache: {
    vue: Vue,
  },
  async getFile(url) {
    const res = await fetch(url);
    const code = await res.text();
    return code;
  },
  addStyle(textContent) {
    const style = Object.assign(document.createElement("style"), {
      textContent,
    });
    const ref = document.head.getElementsByTagName("style")[0] || null;
    document.head.insertBefore(style, ref);
  },
};

const RemoteChild = defineAsyncComponent(async () => {
  const res = await loadModule(
    "http://localhost:8080/remote-component.vue",
    options
  );
  console.log("res", res);
  return res;
});
</script>

<style scoped>
.divider {
  background-color: red;
  width: 100vw;
  height: 1px;
  margin: 20px 0;
}
</style>

在上面的完整例子中，首先渲染了本地組件LocalChild。然後當點擊“載入遠程組件”按鈕後再去渲染遠程組件RemoteChild。我們來看看執行效果，如下圖：
full

從上面的gif圖中可以看到，當我們點擊“載入遠程組件”按鈕後，在network中才去載入了遠程組件remote-component.vue。並且將遠程組件渲染到了頁面上後，通過按鈕的點擊事件可以看到遠程組件的響應式依然有效。

vue3-sfc-loader同時也支持在遠程組件中去引用子組件，你只需在options額外配置一個pathResolve就行啦。pathResolve方法配置如下：

const options = {
  pathResolve({ refPath, relPath }, options) {
    if (relPath === ".")
      // self
      return refPath;

    // relPath is a module name ?
    if (relPath[0] !== "." && relPath[0] !== "/") return relPath;

    return String(
      new URL(relPath, refPath === undefined ? window.location : refPath)
    );
  },
  // getFile方法
  // addStyle方法
}

其實vue3-sfc-loader包的核心代碼就300行左右，主要就是調用vue暴露出來的一些底層API。如下圖：
vue3-sfc-loader

總結

這篇文章講了在vue3中如何從服務端載入遠程組件，首先我們需要使用defineAsyncComponent方法定義一個非同步組件，這個非同步組件是可以直接在template中像普通組件一樣使用。

但是由於defineAsyncComponent接收的組件必須是編譯後的vue組件對象，而我們從服務端拿到的遠程組件就是一個普通的vue文件，所以這時我們引入了vue3-sfc-loader包。vue3-sfc-loader包的作用就是在運行時將一個vue文件編譯成vue組件對象，這樣我們就可以實現從服務端載入遠程組件了。

關註公眾號：【前端歐陽】，給自己一個進階vue的機會

另外歐陽寫了一本開源電子書vue3編譯原理揭秘，這本書初中級前端能看懂。完全免費，只求一個star。


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

-Advertisement-
Play Games
更多相關文章
  • 使用 Nuxt 3 的 defineRouteRules 進行頁面級別的混合渲染
    title: 使用 Nuxt 3 的 defineRouteRules 進行頁面級別的混合渲染 date: 2024/8/12 updated: 2024/8/12 author: cmdragon excerpt: 摘要：本文介紹了Nuxt 3中的defineRouteRules功能，用於實現頁面 ...
  • HTML 引用
    title: 掌握 Nuxt 3 的頁面元數據：使用 definePageMeta 進行自定義配置 date: 2024/8/11 updated: 2024/8/11 author: cmdragon excerpt: 摘要：本文詳細介紹Nuxt 3框架中definePageMeta的使用方法，包 ...
  • 使用 defineNuxtRouteMiddleware 創建路由中間件
    title: 使用 defineNuxtRouteMiddleware 創建路由中間件 date: 2024/8/10 updated: 2024/8/10 author: cmdragon excerpt: 本篇文章介紹瞭如何使用 defineNuxtRouteMiddleware 創建和應用路由 ...
  • HTML 文本格式化
    摘要：目前 OpenTiny HUICharts 已經成功落地在華為內部100多個產品中，持續提升了用戶的可視化體驗。 本文分享自華為雲社區《OpenTiny HUICharts 正式開源發佈，一個簡單、易上手的圖表組件庫》，作者： OpenTiny。 引言 大家好！ 我們非常高興地跟大家宣佈，今天 ...
  • 使用 defineNuxtComponent`定義 Vue 組件
    title: 使用 defineNuxtComponent`定義 Vue 組件 date: 2024/8/9 updated: 2024/8/9 author: cmdragon excerpt: 摘要：本文介紹了在Nuxt 3中使用defineNuxtComponent輔助函數定義類型安全的Vue ...
  • 在 React 項目中 Editable Table 的實現
    我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：佳嵐 可編輯表格在數棧產品中是一種比較常見的表單數據交互方式，一般都支持動態的新增、刪除、排序等基礎功能。 交互分類 可編輯表格一般為兩種交互形式： 實時保存 ...
  • vue前端自適應佈局，一步到位所有自適應
    title: 使用 createError 創建錯誤對象的詳細指南 date: 2024/8/8 updated: 2024/8/8 author: cmdragon excerpt: 摘要：本文介紹了createError函數在Nuxt應用開發中的使用方法，用於創建帶有附加元數據的錯誤對象，以提升 ...
  • HTML 樣式
    title: 清除 Nuxt 狀態緩存：clearNuxtState date: 2024/8/7 updated: 2024/8/7 author: cmdragon excerpt: 摘要：本文介紹了Nuxt.js框架中clearNuxtState方法的使用，該方法用於清除useState管理的 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類