How to solve the performance warning problem of vue3 using ref

Performance warning for vue3 using ref

Problem

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/TodoList.vue";
import Rate from "./components/Rate.vue";

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

Warning

runtime-core.esm-bundler.js: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:
译文：
runtime-core.esm-bundler.js:6591 [Vue warning]: Vue received a component that has become Reactive objects. This causes unnecessary performance overhead and should be avoided by marking components with markRaw or using shallowRef instead of ref. Responded component:

• markRaw: Marks an object so that it will never be converted to a proxy. Returns the object itself.

• shallowRef: Create a ref that tracks its own .value changes, but does not make its value responsive.

Solution

I solved this problem by marking the object as shallowRef

So instead of storing the component in your state, Store a keyed reference to it and perform a lookup against the object

Full code

<template>
  <div>
    <h2>带动画的Todolist</h2>
    <button
      v-for="(i,tab) in tabs"
      :key="i"
      :class="[&#39;tab-button&#39;, { 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/TodoList.vue";
import Rate from "./components/Rate.vue";

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

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

vue3 ref function usage

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>
        <h2>{{mycount}}</h2>
        <button @click="changeMyCount">changeMyCount</button>
    </div>
</template>
 
<script>
import { ref } from "vue";
export default {
    name: "ref",
    setup(){
        const mycount = ref(2);
        const changeMyCount = ()=>{
            mycount.value = mycount.value + 2 ;
        }
        
        return {
            mycount,
            changeMyCount,
        }
    }
};
</script>

The ref function can only monitor changes in basic types and cannot monitor changes in complex types (such as Object, array)

To monitor changes in complex types, you can use the reactive function

2. Obtain elements through the ref attribute

vue3 requires the use of life cycle methods. When setup is executed, The elements in the template have not yet been mounted on 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(()=>{
            console.log(box.value)
        })
    }
};
</script>

The above is the detailed content of How to solve the performance warning problem of vue3 using ref. For more information, please follow other related articles on the PHP Chinese website!