vue3 setup语法糖使用vanta.js的使用方法

<!--这里创建一个vantajs的挂载区域-->
<template>
    <div class="vanta_area" ref="Area"></div>
</template>
<script setup>
//导入vanta.js和three.js，以及ref等hooks
import * as THREE from 'three'
import CLOUDS from 'vanta/src/vanta.waves'
import {onMounted,onBeforeUnmount,ref} from 'vue'

//使用ref引用挂载区域
const Area=ref(null)
//创建一个全局的变量来使用vanta.js
/**
  *因为在vue2中，是使用this.vantaEffect来创建指定的3d动画模板的
  *但是vue3 setup中是没有this，所以要另外创建一个
**/
let vantaEffect=null;
//在两个生命周期钩子内创建vantaEffect
onMounted(()=>{
    vantaEffect=CLOUDS({
        el:Area.value,
        THREE:THREE,
        //如果需要改变样式，要写在这里
        //因为这里vantaEffect是没有setOptions这个方法的
        color: 0x16212a,
    })
})

onBeforeUnmount(()=>{
    if(vantaEffect){
        vantaEffect.destroy()
    }
})
</script>
<style lang="less" scoped>
.vanta_area {
  width:100vw;
  height:100vh;
}
</style>