手動掛載Vue3.0組件到DOM節(jié)點的方法

更新時間：2024年08月29日 10:45:15 作者：Cougars

在VUE應用中,經(jīng)常會使用一些非vue實現(xiàn)的js庫,這些js庫可能要求外部傳入一些界面DOM節(jié)點,本文主要介紹了手動掛載Vue3.0組件到DOM節(jié)點的方法,感興趣的可以了解一下

一、問題

在VUE應用中，經(jīng)常會使用一些非vue實現(xiàn)的js庫，這些js庫可能要求外部傳入一些界面DOM節(jié)點，但該界面通常是vue組件定義，無法直接傳遞給js庫，那么vue組件如何生成DOM節(jié)點傳遞給js庫？比如在開發(fā)地圖應用中，地圖引擎通常是純js庫，當點擊地圖上的信息點彈出信息框時，地圖引擎庫要求傳入信息框的dom節(jié)點，通常該信息框由vue組件實現(xiàn)，無法直接傳遞給地圖引擎庫，需將vue組件手動生成dom節(jié)點，才能傳遞給地圖引擎。

二、手動掛載vue組件

vue組件手動生成dom節(jié)點主要通過以下兩個函數(shù)：

（1）createVNode函數(shù):由組件對象生成一個虛擬節(jié)點。

（2）render函數(shù)：把一個虛擬節(jié)點掛載到一個dom節(jié)點上。

因此要把vue組件掛載在dom節(jié)點可以如下調用:

import  myPopupComp from "./myPopupComp .vue"; //我們寫的組件
import {createVNode,render,getCurrentInstance} from "vue";
const parentNode=docuemnt.createElement("div");
const vNode=createVNode(myPopupComp,{}/*組件要傳遞的參數(shù)*/);
const appContext=getCurrentInstance().appContext;/*獲取app的上下文，
注意：如果getCurrentInstance沒法返回當前的組件實例，
可以將函數(shù)放到組件的setup中執(zhí)行，然后通過變量記錄該實例。
也可以在主函數(shù)createApp時，把app傳遞進來。*/
vNode.appContext=appContext;/*將vue組件關聯(lián)到當前app下管理，
如果這個appContext是單獨創(chuàng)建，那么原來app相關的資源將不能用，
如：router，全局組件等等，都需要重新創(chuàng)建。*/
render(vNode,parentNode);//將組件掛載到parentNode下。

于是parentNode就包含了組件生成的節(jié)點，這個parentNode就可以掛載到地圖的popup組件上。

注意：掛載時，需要將當前app的appContext傳遞給組件，否則組件不能使用當前app的資源，包括路由、界面框架、狀態(tài)等全局組件，無法與當前app交互。

三、卸載vue組件

（1）手動卸載組件

手動掛載到dom節(jié)點的vue組件不會自動卸載，可能會造成內(nèi)存泄漏（是否泄漏具體沒研究過，但如果沒有卸載，組件的onUnmounted不會被調用，導致有些內(nèi)部的依賴該回調的功能出現(xiàn)問題）。卸載組件沒有單獨的方法，復用render方法：

render(null,parentNode);

（2）自動卸載組件

在某些情況下，我們想隨著dom node的生命周期結束，一起自動卸載組件，如：地圖的popup組件的生命周期是由地圖管理的，地圖刪除popup節(jié)點時，刪除對應的vue組件，可采用如下方式，增加對組件節(jié)點被刪除事件的監(jiān)聽，在刪除時，卸載vue組件：

parentNode.addEventListener("DOMNodeRemovedFromDocument",()=>render(null,parentNode));

四、與用createApp掛載的區(qū)別

將vue組件掛載到dom節(jié)點還有另一種方法，就是利用createApp直接創(chuàng)建一個app,然后mount到一個dom節(jié)點上。類似如下代碼：

import {createApp} from "vue";
import myComp from "./myComp.vue"; //我的組件

//待掛載的節(jié)點
const domNode=document.CreateElement("div");
//創(chuàng)建app
const app=createApp(myComp,{/*組件的參數(shù)*/});
//將app掛載到節(jié)點上
app.mount(domNode);

這種方法的vue組件運行在獨立的app下，無法使用主app所注冊的路由、狀態(tài)、界面框架等全局資源，如果要使用，需要重新建立主app所創(chuàng)建的環(huán)境。所以這種方式并不適合我們的使用場景。