Vue3's performance warning problem using ref

Performance warning of vue3 using ref

question

The performance warning code for using ref is as follows

<template>
  <div>
    <component :is="currentTabComponent"></component>
  </div>
</template>

<script setup>

import { ref,shallowRef } from "vue";
import TodoList from "./components/";
import Rate from "./components/";

let tabs ={
  TodoList,
  Rate
}
let currentTabComponent = ref(TodoList)
</script>

warn

:6591 [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:
Translation:
:6591 [Vue Warning]: Vue received a component that has become a responsive object. This results in unnecessary performance overhead and should be avoided by marking components with markRaw or using shallowRef instead of ref . Responsed components:

• markRaw: Tag an object so that it will never be converted to proxy. Returns the object itself.
• shallowRef: Create a ref that tracks its own .value changes, but does not make its value responsive.

solve

I solved this problem by marking the object as shallowRef

So instead of storing the component in your state, store keyed references to it and look up the object

Complete code

<template>
  <div>
    <h1>AnimatedTodolist</h1>
    <button
      v-for="(i,tab) in tabs"
      :key="i"
      :class="['tab-button', { active: currentTabComponent === tab }]"
      @click="fn(tab)"
    >
      {{ tab }}
    </button>
    <component :is="currentTabComponent"></component>
  </div>
</template>

<script setup>

import { ref,shallowRef } from "vue";
import TodoList from "./components/";
import Rate from "./components/";

let tabs ={
  TodoList,
  Rate
}
let currentTabComponent = shallowRef(TodoList)

function fn (tab){
   = tabs[tab]
}
</script>

Usage of vue3 ref function

1. In the setup function, you can use the ref function to create a responsive data. When the data changes, Vue will automatically update the UI.

<template>
    <div>
        <h1>{{mycount}}</h1>
        <button @click="changeMyCount">changeMyCount</button>
    </div>
</template>
 
<script>
import { ref } from "vue";
export default {
    name: "ref",
    setup(){
        const mycount = ref(2);
        const changeMyCount = ()=>{
             =  + 2 ;
        }
        
        return {
            mycount,
            changeMyCount,
        }
    }
};
</script>

The ref function can only listen for changes in basic types, and cannot listen for changes in complex types (such as objects, arrays)

You can use reactive functions to listen for changes in complex types

2. Get elements through ref attribute

vue3 needs to use the lifecycle method. When the setup is executed, the elements in the template have not been mounted to the page, so the elements must be obtained after being mounted.

<template>
    <div>
        <div ref="box"><button>hehe</button></div>
    </div>
</template>
 
<script>
import { ref } from "vue";
export default {
    name: "ref",
    setup(){
        const box = ref(null)
        onMounted(()=>{
            ()
        })
    }
};
</script>

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.