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의 변경 사항을 추적하지만 해당 값을 반응형으로 만들지 않는 참조를 만듭니다.

SOLVED

객체를 얕은 참조로 표시하여 이 문제를 해결했습니다.

따라서 구성 요소를 상태에 저장하는 대신 키가 있는 참조를 저장하고 객체에 대해 조회를 수행하세요.

전체 코드

<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 함수 사용법

1. 설정 함수에서 ref 함수를 사용하여 데이터가 변경되면 Vue는 자동으로 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>

ref 함수를 업데이트하여 기본 유형의 변경 사항을 모니터링할 수 있습니다. , 복잡한 유형(예: 객체, 배열)의 변경 사항을 모니터링할 수 없습니다.

2. ref 속성을 통해 요소를 가져오려면 라이프 사이클을 사용해야 합니다. 이때 템플릿의 요소들은 페이지에 마운트되지 않았으므로 마운트 후 요소들을 얻어야 합니다.

아아아아

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