reactjser/vue3-virtual-scroll-list

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 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

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 !