使用 ref 的 vue3 性能警告

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 函数中对组件进行 shallowRef。我在开始时尝试了 markRaw，但它使组件无反应。在这里完美运行。