ve3性能警告使用ref.

Question

vue正在抛出这个消息:

Vue收到一个组件，该组件被制作为响应对象。这可以导致不必要的性能开销，应该通过避免用markRaw标记组件或用shallowRef代替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 }
}

是否有更好的方法来做到这一点?

Answer 1

首先，您应该返回{elements}而不是在你的设置parseData，我认为。

---

我通过将对象标记为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" />

所以你应该在你的parseData函数中shaallowref你的组件。我开始尝试markRaw，但它使组件无反应。这里它工作得很好。

Answer 2

您可以手动shaallowcopy结果

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

Answer 3

我也有同样的错误。我用markRaw解决了这个问题。你可以在这里阅读!

my code:

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

Answer 4

对于我来说，我已经在data部分定义了一个映射。

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

数据部分可以响应性地更新，所以我得到了控制台错误。将地图移动到一个计算固定它。

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

Answer 5

在显示SVG组件时出现此警告;根据我的推断，Vue之所以显示警告，是因为它假设组件是响应性的，而在某些情况下，响应性对象可能会很大，从而导致性能问题。

markRaw API告诉Vue不要为组件的反应性操心，像这样- markRaw(<Your-Component> or regular object)

Answer 6

我今天也遇到了这个问题，下面是我的解决方案:

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

我将分量变量设置为函数的结果。然后像component ()

那样绑定它

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