vue3 performance warning using ref

Question

vue is throwing this message:

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.

<template>
      <component v-for="(el, idx) in elements" :key="idx" :data="el" :is="el.component" />
</template>



 setup() {
    const { getters } = useStore()
    const elements = ref([])
    onMounted(() => {
      fetchData().then((response) => {
        elements.value = parseData(response)
      })
    })
    return { parseData }
}

is there a better way to do this?

Any particular reason why you're not simply binding the data? — Caramiriel
– Caramiriel, Commented Jan 14, 2021 at 10:15
oh you mean why i'm using the composition api?, i came from react ant it looks much like what i'm used to. Am i wrong using it in my components? — claud.io
– claud.io, Commented Jan 14, 2021 at 10:28

ali emili · Accepted Answer · 2022-03-12 15:17:14Z

33

you could manually shallowCopy the result

<component v-for="(el, idx) in elements" :key="idx" :data="el" :is="{...el.component}" />

answered Mar 12, 2022 at 15:17

ali emili

8952 gold badges10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BojanT Over a year ago

This worked for me , though it is not documented and is so simple ...

Dazag Over a year ago

Why is this answer at the bottom of the page? It worked for me

ggorlen · Accepted Answer · 2024-04-23 07:46:08Z

32

First, you should return { elements } instead of parseData in your setup, I think.

I solved this issue by marking the objects as shallowRef:

import { shallowRef,  ref, computed } from 'vue'
import { EditProfileForm, EditLocationForm, EditPasswordForm} from '@/components/profile/forms'

const profile = shallowRef(EditProfileForm)
const location = shallowRef(EditLocationForm)
const password = shallowRef(EditPasswordForm)

const forms = [profile, location, password]

<component v-for="(form, i) in forms" :key="i" :is="form" />

So you should shallowRef your components inside your parseData function. I tried markRaw at start, but it made the component non-reactive. Here it works perfectly.

edited Apr 23, 2024 at 7:46

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

answered Apr 14, 2021 at 16:07

Benjamin Fourgeaud

8789 silver badges21 bronze badges

4 Comments

gmm Over a year ago

If I do this, nothing is rendered and I get the following warning Component is missing template or render function. If I dont use the shallowRef, component is rendered but i get this other warning ` Vue received a Component which was made a reactive objec`. Any ideas?

Benjamin Fourgeaud Over a year ago

The problem seems to be inside your component. Have you got some code to share ?

MrEduar Over a year ago

I have exactly the same problem as @gumlym I am using an icon package vue-tabler-icons I import the component import { CheckboxIcon } from 'vue-tabler-icons'; and then when I render it with <component> I get the error that gumlym describes

vir us Over a year ago

@gmm same. Did you find a solution?

tastytim · Accepted Answer · 2022-05-07 14:48:02Z

14

I had the same error. I solved it with markRaw. You can read about it here!

my code :

import { markRaw } from "vue";
import Component from "./components/Component.vue";
data() {
    return {
      Component: markRaw(Component),
}

answered May 7, 2022 at 14:48

tastytim

3512 silver badges5 bronze badges

Comments

Jaredcheeda · Accepted Answer · 2022-07-26 19:54:31Z

2

For me, I had defined a map in the data section.

<script>
import TheFoo from '@/TheFoo.vue';

export default {
  name: 'MyComponent',
  data: function () {
    return {
      someMap: {
        key: TheFoo
      }
    };
  }
};
</script>

The data section can be updated reactively, so I got the console errors. Moving the map to a computed fixed it.

<script>
import TheFoo from '@/TheFoo.vue';

export default {
  name: 'MyComponent',
  computed: {
    someMap: function () {
      return {
        key: TheFoo
      };
    }
  }
};
</script>

answered Jul 26, 2022 at 19:54

Jaredcheeda

2,06622 silver badges18 bronze badges

Comments

JoshX · Accepted Answer · 2022-10-15 12:50:05Z

1

I had this warning while displaying an SVG component; from what I deduced, Vue was showing the warning because it assumes the component is reactive and in some cases the reactive object can be huge causing performance issues.

The markRaw API tells Vue not to bother about reactivity on the component, like so - markRaw(<Your-Component> or regular object)

answered Oct 15, 2022 at 12:50

JoshX

495 bronze badges

Comments

Caffeine Cat · Accepted Answer · 2022-10-18 03:37:08Z

1

I also meet this problem today,and here is my solution to solve it:

setup() {
  const routineLayoutOption = reactive({
    board: {
      component: () => RoutineBoard,
    },
    table: {
      component: () => RoutineTable,
    },
    flow: {
      component: () => RoutineFlow,
    },
  });
}

I set the component variant as the result of the function. And in the ,bind it like compoennt()

    <component
        :is="routineLayoutOption[currentLayout].component()"
      ></component>

answered Oct 18, 2022 at 3:37

Caffeine Cat

794 bronze badges

Collectives™ on Stack Overflow

vue3 performance warning using ref

6 Answers 6

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related