Vue路由切换后p5组件未销毁致性能下降问题求助

问题根源 #

p5-vue提供的<P5>组件在Vue组件被路由卸载时，没有自动清理对应的p5实例、画布元素和全局事件监听（如mousePressed）。每次路由切换都会创建新的p5实例，旧实例依然在后台运行并监听事件，导致实例堆积，计算资源被持续占用，最终引发页面卡顿。

解决方案 #

在每个包含<P5>的组件中，手动获取p5实例引用，并在组件卸载时调用p5的remove()方法完成清理，彻底销毁旧实例。

修改步骤（以Component1.vue为例） #

1. 引入Vue的onUnmounted和ref工具函数
2. 创建ref变量存储p5实例
3. 在p5的setup方法中把实例赋值给ref
4. 在组件卸载钩子中调用remove()清理实例

修改后的代码：

<script setup>
import { onUnmounted, ref } from 'vue'

// 存储p5实例的引用
const p5Instance = ref(null)

const sketch = (p5) => {
  p5.setup = () => {
    p5.createCanvas(p5.windowWidth, p5.windowHeight)
    p5.background(127, 127, 127)
    // 将p5实例存入ref，方便后续销毁
    p5Instance.value = p5
  }

  p5.mousePressed = () => {
    console.log("Component1 --> clicked")
  }

  // 可选：处理窗口 resize，避免画布尺寸异常
  p5.windowResized = () => {
    p5.resizeCanvas(p5.windowWidth, p5.windowHeight)
  }
}

// 组件卸载时强制销毁p5实例
onUnmounted(() => {
  if (p5Instance.value) {
    // 先停止draw循环（如果有）
    p5Instance.value.noLoop()
    // 移除画布元素和所有事件监听
    p5Instance.value.remove()
    // 清空引用，帮助GC回收内存
    p5Instance.value = null
  }
})
</script>

<template>
  <P5 :sketch="sketch" />
</template>

对Component2.vue执行相同修改 #

将上述逻辑复制到Component2.vue中，替换对应的日志内容即可。

验证效果 #

修改完成后：

• 进入Component1点击页面，仅输出"Component1 --> clicked"
• 切换到Component2点击，仅输出"Component2 --> clicked"
• 来回切换路由后，点击页面不会出现多条重复日志，p5实例会被彻底销毁，页面性能不会随着切换次数下降

额外注意事项 #

• 如果你的p5组件包含持续运行的draw循环，一定要先调用noLoop()停止循环，再执行remove()，避免销毁前仍在占用CPU
• 若使用p5的全局模式（不推荐），需要手动解绑所有全局事件监听，否则依然会出现实例堆积问题

内容的提问来源于stack exchange，提问作者Ivo Heberle