When I use the Vue 3 Composition API, I find that the generated instance cannot be destroyed. However, in Vue 2, this is normal.

[heyu3913]

Below is my code, and when I click the "Destroy!!!!!!!!" button, an error is reported in the console.

<template>
    <div id="login">
        <div ref="vantaRef" style="width: 100%; height: 90vh"></div>
        <button style="width: 200px;height: 20px" @click="test">Destory!!!!!!!!</button>
    </div>
</template>
<script setup>
import {ref, onBeforeUnmount, onMounted} from 'vue';
import * as THREE from "three";
import BIRDS from "vanta/src/vanta.birds";

const vantaRef = ref(null);
const vantaEffect = ref(null);
const vantaEffectStyle = ref(null);

onMounted(()=>{
    vantaEffect.value = BIRDS({
        el: vantaRef.value,
        THREE: THREE,
    });
    //样式
    vantaEffectStyle.value =  VANTA.BIRDS({
        el: vantaRef.value,
        /*以下为样式配置*/
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.0,
        minWidth: 200.0,
        scale: 1.0,
        scaleMobile: 1.0,
        color: 0xc7d1e8,
        backgroundColor: 0x400bb1,
        points: 13.0,
        maxDistance: 21.0,
        spacing: 16.0,
    });
})
onBeforeUnmount(() => {
    if(vantaEffect.value && vantaEffectStyle.value){
        vantaEffect.value.destroy()
        vantaEffectStyle.value.destroy()
    }
});
const test = ()=>{
    if(vantaEffect.value && vantaEffectStyle.value){
        vantaEffect.value.destroy()
        vantaEffectStyle.value.destroy()
    }
}

</script>

[JuneDan]

Have you resolved the issue?

[heyu3913]

Have you resolved the issue?

没解决

[vdcrea]

Try don't save it to a ref, a simple let worked for me. Replace const vantaEffect = ref(null) With let vantaEffect

And later no need for .value obviously. If you want to make it reactive, maybe watch the options and trigger vantaEffect.destroy() and reinit the effect.

[heyu3913]

Try don't save it to a ref, a simple let worked for me. Replace const vantaEffect = ref(null) With let vantaEffect

And later no need for .value obviously. If you want to make it reactive, maybe watch the options and trigger vantaEffect.destroy() and reinit the effect.

Thank you for your suggestion. While using a simple let instead of a ref does work as a temporary solution, it doesn't address the underlying issue with using this component library in Vue 3. We would prefer to find a more comprehensive solution that fully resolves the problem. We'll continue to investigate and look for a more robust approach to integrate this component library seamlessly with Vue 3. If you have any further insights or suggestions, we would greatly appreciate your input. Thank you!

[adoin]

vantaEffect 不能用响应式吧