Question

我正在学习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>

原始演示使用传统的JavaScript（它是ES5 / 6类）构建，我希望我可以将它们插入我的VUE SPA。在每个演示中我都在做：

this.vsParticles = document.getElementById('vs-particles').textContent;

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

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

我的印象是，当你改变路线时，一切都应该被抹去。所以我的模板标签中的所有元素以及我在mounted（）中创建的任何对象。但这似乎并非如此，我只是想知道是否需要在VUE中包含一些额外的内容以完全清除页面之间的所有内容？

Answer 1

正如Mathieu D.所提到的，你应该将require移到方法之外。

此外，您可能需要清除destroyed () Vue组件钩子上的WebGL上下文。

我不确定这是否是正确的方法，但这是我如何在我的程序中处理它：

this.renderer.forceContextLoss() this.renderer.context = null this.renderer.domElement = null this.renderer = null

Answer 2

您可以尝试从particles.js方法导出mounted吗？例如，在导入mainMenu？

的情况下

导入将对您的所有粒子实例进行一次。

这将为您提供以下代码：

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();
    }
}

您还可以阅读文档中的reactivity in depth。它将帮助您了解VueJS如何存储和访问数据。我不知道你的组件代码中是否存储了ThreeJS示例的一些数据，但如果是这样，它可能会占用一些内存。在这种情况下，请使用destroyed hook来清理数据。

VUE在路由

2 个答案: