技术侦探：修复 Vue3.3.3 中的 p5-urgent 级别 Bug

Vue3.3.3 版本 p5-urgent 级别 Bug 修复纪实

在最近的一个 Vue 3.3.3 项目中，我遇到了一个令人头疼的 p5-urgent 级别 bug。它导致项目启动时出现白屏，严重阻碍了开发进度。为了找到并修复这个 bug，我踏上了技术侦探的旅程。

经过一番深入的排查，我将问题缩小到了 p5.js 库中。p5.js 是一个用于创建交互式图形和动画的 JavaScript 库，也是该项目的核心依赖项。

在经过一番谷歌搜索后，我发现这是一个已知问题，影响了 Vue 3.3.3 版本。问题出在 p5.js 库与 Vue 3 的 reactivity 系统之间的不兼容。

armed with this knowledge, I delved into the code to find the root cause. After hours of debugging and experimentation, I identified the culprit: a missing dependency in the Vue component that was using p5.js.

The missing dependency was the useAttrs function from the vue package. By adding this dependency, Vue was able to properly track changes to the p5 instance, resolving the white screen issue.

Here's a code snippet that demonstrates the fix:

<script>
import { useAttrs } from 'vue'
import p5 from 'p5'

export default {
  setup() {
    const attrs = useAttrs()
    const sketch = (p) => {
      // p5 sketch code here
    }
    new p5(sketch, attrs.ref)
  }
}
</script>

With this fix in place, the white screen issue disappeared, and the project was back up and running smoothly.

Throughout this bug-fixing journey, I learned the importance of understanding the underlying dependencies and reactivity systems in Vue. It also highlighted the power of community support and the value of perseverance in troubleshooting complex issues.