Bagaimana untuk menyelesaikan masalah amaran prestasi vue3 menggunakan ref

Amaran prestasi Vue3 apabila menggunakan ref

Masalah

Kod amaran prestasi apabila menggunakan ref adalah seperti berikut

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

Amaran

runtime-core.esm-bundler.js:6591 [Vue warn]: Vue menerima Komponen yang dijadikan objek reaktif Ini boleh menyebabkan overhed prestasi yang tidak perlu dan harus dielakkan dengan menandakan komponen dengan markRaw atau menggunakan shallowRef dan bukannya ref. Komponen yang dibuat reaktif: Objek reaktif. Ini menyebabkan overhed prestasi yang tidak perlu dan harus dielakkan dengan menandakan komponen dengan markRaw atau menggunakan shallowRef dan bukannya ref. Komponen bertindak balas:

• : Menanda objek supaya ia tidak akan ditukar kepada proksi. Mengembalikan objek itu sendiri.

  markRaw

• : Buat ref yang menjejaki perubahan dalam nilai .nya sendiri, tetapi tidak menjadikan nilainya responsif.

  shallowRef

SELESAIKAN

Saya menyelesaikan masalah ini dengan menandakan objek sebagai shallowRef

Jadi daripada menyimpan komponen dalam keadaan anda Simpan rujukan berkunci kepadanya dan cari objek

Kod penuh

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

penggunaan fungsi ref vue3

1 Dalam fungsi persediaan , anda boleh menggunakan fungsi ref untuk cipta data responsif. Apabila data berubah, Vue akan mengemas kini UI secara automatik

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

Fungsi ref hanya boleh memantau perubahan dalam jenis asas dan tidak boleh memantau perubahan dalam jenis kompleks (seperti Objek, tatasusunan)

Untuk memantau perubahan dalam jenis kompleks, anda boleh menggunakan fungsi reaktif

2 Dapatkan elemen melalui atribut ref

vue3 perlu menggunakan kaedah kitaran hayat apabila persediaan dilaksanakan , Elemen dalam templat belum lagi dipasang pada halaman, jadi elemen mesti diperoleh selepas dipasang.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah amaran prestasi vue3 menggunakan ref. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!