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

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

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 收到一個組件，該組件已成為響應式對象。這會導致不必要的性能開銷，應該通過使用 markRaw 標記組件或使用 shallowRef 代替 ref 來避免。被響應的組件：

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

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

解決

我通過將對象標記為shallowRef解決了這個問題

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

完整代碼

<template>
  <div>
    <h3>帶動畫的Todolist</h3>
    <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)建一個響應式數(shù)據(jù)，當數(shù)據(jù)發(fā)生改變時，Vue會自動更新UI

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

監(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的性能警告問題如何解決”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

名稱欄目：vue3使用ref的性能警告問題如何解決
URL分享：http://m.rwnh.cn/article12/jdgcdc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、小程序開發(fā)、App開發(fā)、做網(wǎng)站、全網(wǎng)營銷推廣、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)