快捷導(dǎo)航

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

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

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

一、問題

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

二、手動掛載vue組件

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

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

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

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

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沒法返回當(dāng)前的組件實(shí)例，
可以將函數(shù)放到組件的setup中執(zhí)行，然后通過變量記錄該實(shí)例。
也可以在主函數(shù)createApp時(shí)，把a(bǔ)pp傳遞進(jìn)來。*/
vNode.appContext=appContext;/*將vue組件關(guān)聯(lián)到當(dāng)前app下管理，
如果這個(gè)appContext是單獨(dú)創(chuàng)建，那么原來app相關(guān)的資源將不能用，
如：router，全局組件等等，都需要重新創(chuàng)建。*/
render(vNode,parentNode);//將組件掛載到parentNode下。

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

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

三、卸載vue組件

（1）手動卸載組件

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

render(null,parentNode);

（2）自動卸載組件

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

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

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

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

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

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

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