VUEルート間のTHREE JSを使用したメモリの割り当て解除

Question

私はVUE JSの学習中です。私は様々なページ間をルーティングする非常に基本的なSPAを持っています。

私は暇な時に構築した数多くのTHREE 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> 

オリジナルのデモは（それがES5/6クラスの）伝統的なJavaScriptを使用して構築されたと私はそれを期待していました私はそれらを私のVUE SPAに差し込むことができます。シェーダをロードし、DOM要素に私THREEデモを添付する

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

：各デモの中で私のようなことをやっています。

私が抱えている問題は、何かが削除されていないということです。私のデモでは、DOMで新しいものは作成していません.SPA以外のデモでもうまく動作しますが、SPAアプリケーションに配置してページ間をジャンプすると、

私はあなたがルートを変更するときにすべてが拭き取られるべきであるという印象を受けています。だから私のテンプレートタグ内のすべての要素と、私がmount（）内で作成したすべてのオブジェクト。しかし、これは事実ではないようです。私はVUEに含めて、ページ間のすべてを完全に消去する必要があると思っていますか？

Answer 1

Mathieu D. mentionned氏は、requireをメソッドの外に移動する必要があります。

また、destroyed() VueコンポーネントのフックでWebGLコンテキストをクリアする必要があります。

私はそれを行うには正しい方法ですが、ここで私は私のプログラムでそれを配置する方法であるかどうかわからないです：

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

Answer 2

を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を使用してください。