Comment résoudre le problème d'avertissement de performances de vue3 en utilisant la référence

Avertissement de performances Vue3 utilisant ref

Problème

Le code d'avertissement de performances utilisant ref est le suivant

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

Avertissement

runtime-core.esm-bundler.js:6591 [Vue warn] : Vue a reçu un Composant qui a été transformé en objet réactif. Cela peut entraîner une surcharge de performances inutile et doit être évité en marquant le composant avec markRaw ou en utilisantshallowRef au lieu de ref. . js:6591 [Avertissement Vue] : Vue a reçu un composant qui a été rendu réactif. Cela entraîne une surcharge de performances inutile et doit être évité en marquant les composants avec markRaw ou en utilisant ShallowRef au lieu de ref. Composants ayant réagi :

markRaw : marque un objet afin qu'il ne soit jamais converti en proxy. Renvoie l'objet lui-même.

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

• shallowRef

  shallowRef : créez une référence qui suit les modifications dans son propre .value, mais ne rend pas sa valeur réactive.

RESOLU

J'ai résolu ce problème en marquant l'objet comme ShallowRef

Donc, au lieu de stocker le composant dans votre état, stockez une référence à clé et effectuez la recherche sur l'objet

Code complet

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

Utilisation de la fonction refvue3

1. Dans la fonction de configuration, vous pouvez utiliser la fonction ref pour créer des données réactives. Lorsque les données changent, Vue mettra automatiquement à jour la fonction 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 ne peut que surveiller les modifications dans les types de base. , vous ne pouvez pas surveiller les changements dans les types complexes (tels que les objets, les tableaux). Pour surveiller les changements dans les types complexes, vous pouvez utiliser la fonction réactive

2 Obtenir des éléments via l'attribut ref. et exécutez-le dans setup. À l'heure actuelle, les éléments du modèle n'ont pas été montés sur la page, les éléments doivent donc être obtenus après avoir été montés.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!