使用 ref 的 vue3 性能警告

Posted 2023-02-16

【中文标题】使用 ref 的 vue3 性能警告

【英文标题】：vue3 performance warning using ref

【发布时间】：2021-04-19 08:00:57

【问题描述】：

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 

有没有更好的方法来做到这一点？

【问题讨论】：

您有什么特殊原因不只是简单地绑定数据吗？

我正在 v-for 中绑定数据

哦，你的意思是我为什么要使用组合 API？，我来自 react ant，它看起来很像我习惯的。我在我的组件中使用它错了吗？

【参考方案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，但它使组件无反应。在这里完美运行。

【讨论】：

如果我这样做，则不会渲染任何内容，并且会收到以下警告 Component is missing template or render function。如果我不使用 shallowRef，组件会被渲染，但我会收到另一个警告“Vue 收到了一个组件，该组件被制成了一个反应性对象”。有什么想法吗？

问题似乎出在您的组件内部。你有一些代码要分享吗？