为了这篇文章的目的，我创建了一个简单的例子:
http://wagoon.demoeshop.net/test-remove-vue.html
在此示例中，您将找到两个按钮。
DIV元素，然后创建一个 Vue 应用程序并将其安装到该 div 示例代码
在我的示例中，您会发现两个按钮
<button type="button" onclick="myTest.mount()">.mount()</button>
<button type="button" onclick="myTest.unmount()">.unmount()</button>
<script src="https://unpkg.com/vue@next"></script>
testClass() 中出于调试原因:function testClass(){
// vueApp is public just for debugging reasons
this.vueApp = null;
// creates DIV with id #appDiv and apends it to <body>
function createDiv(){
var div = document.createElement('div');
div.id = "appDiv";
document.body.append(div);
}
// creates new Vue app and mounts it to #appDiv
this.mount = function(){
createDiv();
this.vueApp = Vue.createApp({"template":"Vue mounted"});
this.vueApp.mount('#appDiv');
}
// unmounts Vue app
this.unmount = function(){
// MEMORY LEAK HERE:
this.vueApp.unmount('#appDiv'); // this line should mark vueApp as collectable for garbage collector,it's not
this.vueApp = null; // event this line does not help
// SOLUTION: only removing app taget element from DOM is marking object created with Vue.createApp()
// as collectable by garbage collector.
// document.querySelector('#appDiv').remove();
}
}
myTest = new testClass();
出于调试原因，创建的应用程序存储在 testClass 中的 this.vueApp 中，以便我们可以轻松找到对象 id。只需按照以下步骤
如何解决此内存泄漏
我找到的唯一解决方案是删除
DIV#appDiv来自 DOM(删除该元素的代码在 myTest.unmount() 方法中注释)。之后，再次调用垃圾收集器将从内存中删除该对象。还有其他解决方案吗？
为什么这是(大)问题
在具有多个屏幕的大应用程序中，创建和删除整个应用程序是唯一的方法，如何节省内存(脚本只是加载实际页面的代码，当用户想要另一个页面时，实际页面被破坏并加载新页面，然后新的 Vue应用程序已创建)
你也不能通过创建动态组件来解决这个问题，因为 Vue3 删除了(我认为这是一个很大的错误) $destroy 方法，所以当你为新屏幕创建新组件时，旧组件将永远保留在内存中。
Vue路由器不会解决这个问题，因为Vue路由器在启动时会加载所有页面，这在大型应用程序中是 Not Acceptable ，因为网络带宽会很大(只为一个应用程序加载兆字节的代码是错误的)
最佳答案
在 VUE 3.0.6 中修复
VUE js 3.0.6 版本修复了这个问题
关于Vue.js 3 卸载和内存泄漏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65475604/