Vue3 - 解决报错警告 Vue received a Component that was made a reactive object. This can lead to unnecessary

前言

关于此问题网上的教程都无法解决，如果您的报错信息与我相似，即可解决。

在 vue3 项目开发中，详解控制台报错警告：[Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with markRaw or using shallowRef instead of ref. Component that was made reactive，很恶心的错误不好排查，可能出现在Router路由、自定义组件、v-for动态渲染、ref命名等问题，本文提供详细排查及解决方案，保证搞定。

---

如下图所示，只要报错差不多就能 100% 完美解决。

详细示例解决方法，保证搞定。

解决方案

按照下方错误分析说明及示例代码，搞定此