vue3 + element-plus关于icon报Component that was made reactive的问题

「已注销」

于 2022-06-14 00:18:17 发布

阅读量814

点赞数

分类专栏：我的Vue学习日记文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_43319054/article/details/125270055

版权

在使用Vue3和Element-Plus时遇到了关于图标组件被做成反应对象的警告。警告提示可能导致不必要的性能开销，并建议使用`markRaw`或`shallowRef`代替`ref`。问题出现在<ElIcon>组件中，该组件是通过`ElButton`的`icon`属性使用的。解决方案是在使用图标组件的页面上添加相应处理，并在data中声明图标组件。

摘要由CSDN通过智能技术生成

[Vue warn]: Vue received a Component which 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: {name: 'ChatDotRound', __file: '/home/runner/work/element-plus-icons/element-plus-…ns/packages/vue/src/components/chat-dot-round.vue', render: ƒ}
at <ElIcon key=1 >
at <ElButton icon= {name: 'ChatDotRound', __file: '/home/runner/work/element-plus-icons/element-plus-…ns/packages/vue/src/components/chat-dot-round.vue', render: ƒ} onClick=fn >
at <ElInput placeholder="请输入内容" modelValue="" onUpdate:modelValue=fn ... >
at <UserNav09 key=0 >
at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {goRoot: ƒ, login: ƒ, logOut: ƒ, getlo