ref를 사용하여 vue3의 성능 경고 문제를 해결하는 방법

ref 사용 시 Vue3 성능 경고

Problem

ref 사용 시 성능 경고 코드는 다음과 같습니다

<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 경고]: Vue 반응형 개체로 만들어진 구성 요소를 받았습니다. 이는 불필요한 성능 오버헤드를 초래할 수 있으므로 구성 요소를 markRaw로 표시하거나 반응형으로 만들어진 구성 요소인shallowRef를 사용하여 피해야 합니다. -bundler.js:6591 [Vue 경고]: Vue가 반응형으로 만들어진 구성 요소를 받았습니다. 이로 인해 불필요한 성능 오버헤드가 발생하므로 구성 요소를 markRaw로 표시하거나 ref 대신shallowRef를 사용하여 방지해야 합니다. 반응된 구성 요소:

markRaw: 개체가 프록시로 변환되지 않도록 표시합니다. 객체 자체를 반환합니다.

• markRaw: 标记一个对象，使其永远不会转换为 proxy。返回对象本身。

• shallowRef

  shallowRef: 자체 .value의 변경 사항을 추적하지만 해당 값을 반응형으로 만들지 않는 참조를 만듭니다.

전체 코드

<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>

로그인 후 복사

<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>

아아아아

위 내용은 ref를 사용하여 vue3의 성능 경고 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!