Javascript VUE在路由之间使用三个JS释放内存

我正在学习VUE JS。我有一个非常基本的SPA，可以在不同的页面之间进行路由

我在业余时间制作了三个JS演示，我注意到如果我在页面之间跳转，它们最终会因为内存的积累而停止。我想避免在这里粘贴他们的脚本，因为它们非常庞大，我认为问题不在它们内部

我认为问题在于我如何实例化它们和我缺乏VUE JS方面的知识之间的某个地方，正是这一问题给我带来了麻烦

下面是我在VUE JS中路由到的其中一个视图的示例：

<template>
    <div class="particles">
        <main-menu></main-menu>

        <div id="demo"></div>
    </div>
</template>

<script>
    import mainMenu from 'root/views/menu.vue';

    export default {
        components: { mainMenu },
        mounted() {
            var Particles = require('root/webgl/particles.js');
            var demo = new Particles();
            demo.run();
        }
    }
</script>

加载着色器并将我的三个演示附加到DOM元素

我遇到的问题是有些东西没有被删除。在我的演示中，我没有在DOM中创建任何新的东西，它们在非SPA演示中运行良好，但一旦我将它们放入SPA应用程序并在它们构建的页面之间跳跃

---

我的印象是，当你改变路线时，一切都应该被抹掉。因此，我的模板标记中的所有元素以及我在mounted（）中创建的任何对象。但事实似乎并非如此，我只是想知道我是否需要在VUE中加入一些额外的内容来彻底清理页面之间的所有内容？

您是否可以尝试从

挂载的
方法中导入
particles.js
？
例如，在导入
主菜单下

导入将针对所有粒子的实例化一次完成

这将为您提供以下代码：

import mainMenu from 'root/views/menu.vue';
import Particles from 'root/webgl/particles.js';

export default {
    components: { mainMenu },
    mounted() {
        var demo = new Particles();
        demo.run();
    }
}

您也可以阅读文档。它将帮助您了解VueJS如何存储和访问数据。我不知道您是否在组件代码中存储了3JS示例的一些数据，但如果是这样，可能会消耗一些内存。在这种情况下，使用来清理数据。
正如Mathieu D.提到的，您应该将
require
移到方法之外

此外，您可能需要清除
destrocted（）
Vue组件挂钩上的WebGL上下文

我不确定这样做是否正确，但以下是我在程序中如何处理它：


this.renderer.forceContextLoss（）
this.renderer.context=null
this.renderer.doElement=null
this.renderer=null
三。渲染器的方法forceContextLoss实际上是模拟上下文丢失，并使用WEBGL\u lose\u上下文扩展，如果您以IE11为目标，这是不受支持的。我不会写长篇大论的答案，我将分享Gman的感谢，销毁钩子+修复它。
import mainMenu from 'root/views/menu.vue';
import Particles from 'root/webgl/particles.js';

export default {
    components: { mainMenu },
    mounted() {
        var demo = new Particles();
        demo.run();
    }
}