vue使用粒子效果particles.js的内存泄露问题

最新推荐文章于 2026-01-11 00:48:05 发布

原创

最新推荐文章于 2026-01-11 00:48:05 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#particles.js的内存泄露 #particles.js #内存泄露

本文探讨了在Vue项目中使用particles.js时遇到的内存泄露问题，由于持续的requestAnimFrame导致内存持续消耗。文章提供了通过理解particles.js源码并结合Vue生命周期，调用相应销毁函数以解决内存泄露的方法。

1.vue中使用particles.js

效果：

代码实例:

<template lang='pug'>
    #c-animate
        .c-background__content
            .c-background__title
                img(:src="logoSrc")
                span {
  
  { title }}
</template>
<script>
    /* eslint-disable */
    export default {
        props: ['title', 'logoSrc'],
        data () {
            return {}
        },
        methods: {
            initialize () {
                require('particles.js')
                let self = this
                particlesJS('c-animate', {
                    selector: self.$el.className,
                    'particles': {
                        'number': {
                            'value': 275,
                            'density': {
                                'e