Vue received a Component which was made a reactive object.
Opened this issue · 2 comments
[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: "MessageItem", props: {…}, __file: "src/components/MessageItem.vue", __hmrId: "681364ba", render: ƒ}
at <VirtualListItem index=0 tag="div" event="itemResize" ... >
at <VirtualList style= {overflow-y: "scroll"} data-sources= [{…}] data-key="id" ... >
at <Message class="h-50" onSend=fn onDataFunction=fn ... >
at
[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 usingshallowRef
instead ofref
. Component that was made reactive: {name: "MessageItem", props: {…}, __file: "src/components/MessageItem.vue", __hmrId: "681364ba", render: ƒ} at <VirtualListItem index=0 tag="div" event="itemResize" ... > at <VirtualList style= {overflow-y: "scroll"} data-sources= [{…}] data-key="id" ... > at <Message class="h-50" onSend=fn onDataFunction=fn ... > at
try this solution: https://jskoa.com/?p=8666
use the Item component in setup() instead of in data(). It works for me.
Be Like this:
`import {
Search
} from '@element-plus/icons'
data(){
return{
Search
}
},`
=>
`
import {
Search
} from '@element-plus/icons'
setup(props, context){
return {
Search //这return同样在模板中能显示
}
},
`
Hello my friends !!
I will show you how to do with Options API 👍
<script> import { Search } from "@element-plus/icons-vue"; import { shallowRef } from "vue"; components: { Search }, Data( ) { return { Search : shallowRef( Search ) } } </script>-You have to import Search icon from '@element-plus/icons-vue'
-You have to import shallowRef from 'vue'
-You have to add your icon name Search in the components
-You have to add your icon name Search in the Data as you see and the error massage will not show again 👍
If this helped you please give me 👍 for everyone see the solution.
Byee !