refを使用してvue3のパフォーマンス警告問題を解決する方法

ref を使用した vue3 のパフォーマンス警告

問題

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>

Warning

runtime-core.esm-bundler.js:6591 [Vue warn]: Vue は、リアクティブ オブジェクトとなったコンポーネントを受け取りました。これは、不必要なパフォーマンスのオーバーヘッドを引き起こす可能性があるため、回避する必要があります。コンポーネントを markRaw でマークするか、ref の代わりに ShallowRef を使用して、リアクティブになったコンポーネント:
译文：
runtime-core.esm-bundler.js:6591 [Vue の警告]: Vue は、次のコンポーネントを受け取りました。反応性のオブジェクト。これは不必要なパフォーマンスのオーバーヘッドを引き起こすため、コンポーネントを markRaw でマークするか、ref の代わりにshallowRef を使用することで回避する必要があります。応答されたコンポーネント:

• markRaw: オブジェクトがプロキシに変換されないようにマークします。オブジェクト自体を返します。

• shallowRef: 独自の .value の変更を追跡する参照を作成しますが、その値を応答性にしないようにします。

解決策

オブジェクトをshallowRefとしてマークすることでこの問題を解決しました。

したがって、コンポーネントを状態に保存する代わりに、コンポーネントへのキー付き参照を保存します。そしてオブジェクトに対するルックアップを実行します

フルコード

<template>
  <div>
    <h2 id="带动画的Todolist">带动画的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関数の使用法

1. setup関数では、refを使用できます。データが変更されると、Vue は自動的に UI を更新します

<template>
    <div>
        <h2 id="mycount">{{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 関数は基本型の変更のみを監視でき、複雑な型 (オブジェクト、配列など) の変更は監視できません

複合型の変更を監視するには、リアクティブ関数

#2 を使用できます。ref 属性を通じて要素を取得します

vue3 では、ライフ サイクル メソッドを使用する必要があります。実行されました。テンプレート内の要素はまだページにマウントされていないため、要素はマウント後に取得する必要があります。

rree

以上がrefを使用してvue3のパフォーマンス警告問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。