Heim > Web-Frontend > View.js > So lösen Sie das Leistungswarnungsproblem von vue3 mithilfe von Ref

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

王林
Freigeben: 2023-05-13 15:10:06
nach vorne
2440 Leute haben es durchsucht

    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>
    Nach dem Login kopieren

    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>
    Nach dem Login kopieren
    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>
    Nach dem Login kopieren

    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!

    Verwandte Etiketten:
    Quelle:yisu.com
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage