本篇內(nèi)容主要講解“vue3使用ref的性能警告問(wèn)題如何解決”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue3使用ref的性能警告問(wèn)題如何解決”吧!

為和田縣等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及和田縣網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為做網(wǎng)站、網(wǎng)站建設(shè)、和田縣網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

vue3使用ref的性能警告

問(wèn)題

使用 ref 的性能警告 代碼如下

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)

警告

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)致不必要的性能開(kāi)銷(xiāo)，應(yīng)該通過(guò)使用 markRaw 標(biāo)記組件或使用 shallowRef 代替 ref 來(lái)避免。被響應(yīng)的組件：

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

• shallowRef: 創(chuàng)建一個(gè)跟蹤自身 .value 變化的 ref，但不會(huì)使其值也變成響應(yīng)式的。

解決

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

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

完整代碼

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

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

ref函數(shù)僅能監(jiān)聽(tīng)基本類(lèi)型的變化，不能監(jiān)聽(tīng)復(fù)雜類(lèi)型的變化（比如對(duì)象、數(shù)組）

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

2.通過(guò)ref屬性獲取元素

vue3需要借助生命周期方法，在setup執(zhí)行時(shí)，template中的元素還沒(méi)掛載到頁(yè)面上，所以必須在mounted之后才能獲取到元素。

到此，相信大家對(duì)“vue3使用ref的性能警告問(wèn)題如何解決”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！