vue3使用ref的性能警告問題

更新時(shí)間：2023年04月19日 09:15:00 作者：mrhaoxiaojun

這篇文章主要介紹了vue3使用ref的性能警告問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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 avoided by marking the component with markRaw or using shallowRef instead of ref. Component that was made reactive:
譯文：
runtime-core.esm-bundler.js:6591 [Vue 警告]：Vue 收到一個(gè)組件，該組件已成為響應(yīng)式對(duì)象。這會(huì)導(dǎo)致不必要的性能開銷，應(yīng)該通過使用 markRaw 標(biāo)記組件或使用 shallowRef 代替 ref 來避免。被響應(yīng)的組件：

markRaw: 標(biāo)記一個(gè)對(duì)象，使其永遠(yuǎn)不會(huì)轉(zhuǎn)換為 proxy。返回對(duì)象本身。
shallowRef: 創(chuàng)建一個(gè)跟蹤自身 .value 變化的 ref，但不會(huì)使其值也變成響應(yīng)式的。

解決

我通過將對(duì)象標(biāo)記為shallowRef解決了這個(gè)問題

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

完整代碼

<template>
  <div>
    <h1>帶動(dòng)畫的Todolist</h1>
    <button
      v-for="(i,tab) in tabs"
      :key="i"
      :class="['tab-button', { 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ù)，用于創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，Vue會(huì)自動(dòng)更新UI

<template>
? ? <div>
? ? ? ? <h1>{{mycount}}</h1>
? ? ? ? <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)聽復(fù)雜類型的變化（比如對(duì)象、數(shù)組）

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

2.通過ref屬性獲取元素

vue3需要借助生命周期方法，在setup執(zhí)行時(shí)，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>