So lösen Sie das Leistungswarnungsproblem von vue3 mithilfe von Ref

Vue3-Leistungswarnung bei Verwendung von ref

Problem

Der Leistungswarnungscode bei Verwendung von ref lautet wie folgt:

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

Warnung

runtime-core.esm-bundler.js:6591 [Vue-Warnung]: Vue Sie haben eine Komponente erhalten, die zu einem reaktiven Objekt gemacht wurde. Dies kann zu unnötigem Leistungsaufwand führen und sollte vermieden werden, indem Sie die Komponente mit markRaw markieren oder „shallowRef“ anstelle von „ref“ verwenden -bundler. js:6591 [Vue-Warnung]: Vue hat eine Komponente erhalten, die reaktiv gemacht wurde. Dies führt zu unnötigem Leistungsaufwand und sollte vermieden werden, indem Komponenten mit markRaw markiert oder flachRef anstelle von ref verwendet werden. Reagierte Komponenten:

markRaw: Markieren Sie ein Objekt, damit es niemals in einen Proxy umgewandelt wird. Gibt das Objekt selbst zurück.

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

• shallowRef

  shallowRef: Erstellen Sie eine Referenz, die Änderungen in ihrem eigenen .value verfolgt, ihren Wert jedoch nicht responsiv macht.

GELÖST

Ich habe dieses Problem gelöst, indem ich das Objekt als „shallowRef“ markiert habe

vue3-Ref-Funktionsverwendung

1. In der Setup-Funktion können Sie die Ref-Funktion verwenden, um reaktionsfähige Daten zu erstellen. Vue aktualisiert die Benutzeroberfläche automatisch.

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

ref-Funktion kann nur Änderungen in Grundtypen überwachen Sie können Änderungen in komplexen Typen (z. B. Objekten, Arrays) nicht überwachen, indem Sie die reaktive Funktion

2 verwenden, um den Lebenszyklus zu verwenden Methode und führen Sie sie im Setup aus. Zu diesem Zeitpunkt sind die Elemente in der Vorlage noch nicht auf der Seite gemountet, daher müssen die Elemente nach dem Mounten abgerufen werden.

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

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Leistungswarnungsproblem von vue3 mithilfe von Ref. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!