vue3使用ref的性能警告问题怎么解决

这篇文章主要介绍“vue3使用ref的性能警告问题怎么解决”，在日常操作中，相信很多人在vue3使用ref的性能警告问题怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3使用ref的性能警告问题怎么解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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: 标记一个对象，使其永远不会转换为 proxy。返回对象本身。

• shallowRef: 创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的。

解决

我通过将对象标记为shallowRef解决了这个问题

因此，不要将组件存储在您的状态中，而是存储对它的键控引用，并针对对象进行查找

完整代码

<template>
  <div>
    <h2>带动画的Todolist</h2>
    <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函数用法

1.在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，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函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）

监听复杂类型的变化可以使用reactive函数

2.通过ref属性获取元素

vue3需要借助生命周期方法，在setup执行时，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的性能警告问题怎么解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注蜗牛博客网站，小编会继续努力为大家带来更多实用的文章！