响应式警告 [Vue warn]: Vue received a Component that was made a reactive object

index.vue:85 [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.

最近修改代码,发现控制台有警告。

查到具体报warning的代码位置是这里,因为对象试用了reactive响应式。然后又导入了一个图标组件用于渲染。

Vue 检测到将一个组件对象(这里是 icon-refresh)放入了响应式系统中,这会导致不必要的性能开销

解决方案

  1. 使用 markRaw 标记组件
  1. 使用 shallowRef 替代 ref