Currently, I am delving into the world of VUE JS and working on a basic SPA that navigates through different pages.
In my spare time, I have developed several THREE JS demos which unfortunately tend to slow down and eventually halt when switching between pages due to memory buildup. I suspect the issue lies not within the scripts themselves, as they are quite extensive, but rather in how I am initializing them and my limited knowledge of VUE JS.
One of the views I am routing to in VUE JS looks like this:
<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>
The original demos were created using traditional JavaScript (it's an ES5/6 class) and I hoped to seamlessly integrate them into my VUE SPA. In each demo, I am loading shaders and attaching my THREE demo to a DOM element like so:
this.vsParticles = document.getElementById('vs-particles').textContent;
My concern arises from the fact that something is not getting properly cleared or deleted. While my demos function smoothly outside of the SPA context without creating any new elements in the DOM, they accumulate issues once placed within a SPA app and navigating between pages.
I had assumed that changing routes would result in everything being wiped clean - all elements within my template tags and any objects I create within `mounted()`. However, that does not seem to be the case. I am now wondering if there are additional steps I need to take in VUE to ensure complete cleanup between page transitions.