vue3使用ref的效能警告

問題

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

警告

runtime-core.esm-bundler.js:6591 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoid by marking component with markRaw or using shallowRef instead of ref. Component that was made reactive:
譯文：
runtime-core.esm-bundler.js:6591 [Vue 警告]：Vue 收到一個組件，該組件已成為響應(yīng)式物件。這會導(dǎo)致不必要的效能開銷，應(yīng)該透過使用 markRaw 標(biāo)記元件或使用 shallowRef 代替 ref 來避免。被回應(yīng)的元件：

• markRaw: 標(biāo)記一個對象，使其永遠(yuǎn)不會轉(zhuǎn)換為 proxy。返回對象本身。

• shallowRef: 建立一個追蹤自身 .value 變化的 ref，但不會使其值也變成響應(yīng)式的。

解決

我透過將物件標(biāo)記為shallowRef解決了這個問題

因此，不要將元件儲存在您的狀態(tài)中，而是儲存對它的鍵控引用，並針對物件進(jìn)行查找

完整程式碼

<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函數(shù)用法

1.在setup函數(shù)中，可以使用ref函數(shù)，用於建立一個響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生改變時，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函數(shù)僅能監(jiān)聽基本類型的變化，不能監(jiān)聽複雜類型的變化（例如物件、陣列）

監(jiān)聽複雜類型的變化可以使用reactive函數(shù)

2.透過ref屬性取得元素

vue3需要藉助生命週期方法，在setup執(zhí)行時， template中的元素還沒掛載到頁面上，所以必須在mounted之後才能取得到元素。

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

以上是vue3使用ref的效能警告問題怎麼解決的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！