手动挂载Vue3.0组件到DOM节点的方法

目录

• 一、标题
• 二、手动挂载vue组件
• 三、卸载vue组件
• 四、与用createApp挂载的区别
• 五、小结

一、标题

在VUE应用中，经常会利用一些非vue实现的js库，这些js库大概要求外部传入一些界面DOM节点，但该界面通常是vue组件定义，无法直接传递给js库，那么vue组件怎样生成DOM节点传递给js库？比如在开辟地图应用中，地图引擎通常是纯js库，当点击地图上的信息点弹出信息框时，地图引擎库要求传入信息框的dom节点，通常该信息框由vue组件实现，无法直接传递给地图引擎库，需将vue组件手动生成dom节点，才能传递给地图引擎。

二、手动挂载vue组件

vue组件手动生成dom节点主要通过以下两个函数：

（1）createVNode函数:由组件对象生成一个捏造节点。

（2）render函数：把一个捏造节点挂载到一个dom节点上。

因此要把vue组件挂载在dom节点可以如下调用:

于是parentNode就包含了组件生成的节点，这个parentNode就可以挂载到地图的popup组件上。

注意：挂载时，须要将当前app的appContext传递给组件，否则组件不能利用当前app的资源，包括路由、界面框架、状态等全局组件，无法与当前app交互。

三、卸载vue组件

（1）手动卸载组件

手动挂载到dom节点的vue组件不会自动卸载，大概会造成内存泄漏（是否泄漏具体没研究过，但如果没有卸载，组件的onUnmounted不会被调用，导致有些内部的依赖该回调的功能出现标题）。卸载组件没有单独的方法，复用render方法：

render(null,parentNode);

（2）自动卸载组件

在某些情况下，我们想随着dom node的生命周期竣事，一起自动卸载组件，如：地图的popup组件的生命周期是由地图管理的，地图删除popup节点时，删除对应的vue组件，可接纳如下方式，增长对组件节点被删除变乱的监听，在删除时，卸载vue组件：

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

四、与用createApp挂载的区别

将vue组件挂载到dom节点还有另一种方法，就是利用createApp直接创建一个app,然后mount到一个dom节点上。类似如下代码：

这种方法的vue组件运行在独立的app下，无法利用主app所注册的路由、状态、界面框架等全局资源，如果要利用，须要重新创建主app所创建的情况。所以这种方式并不得当我们的利用场景。

五、小结

在Vue应用中，如果须要将某个vue组件提供给其他不支持vue的js框架，可接纳此方法将vue组件生成的dom节点传递给框架，同时保持该vue组件可与当前应用交互。

到此这篇关于手动挂载Vue3.0组件到DOM节点的方法的文章就介绍到这了,更多相干Vue手动挂载到DOM节点内容请搜刮脚本之家以前的文章或继续浏览下面的相干文章盼望大家以后多多支持脚本之家！