189 8069 5689

vue3使用ref的性能警告问题如何解决

本篇内容主要讲解“vue3使用ref的性能警告问题如何解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3使用ref的性能警告问题如何解决”吧!

为和田县等地区用户提供了全套网页设计制作服务，及和田县网站建设行业解决方案。主营业务为做网站、网站建设、和田县网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

    vue3使用ref的性能警告

    问题

    使用 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 收到一个组件，该组件已成为响应式对象。这会导致不必要的性能开销，应该通过使用 markRaw 标记组件或使用 shallowRef 代替 ref 来避免。被响应的组件：

    • markRaw: 标记一个对象，使其永远不会转换为 proxy。返回对象本身。

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

    解决

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

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

    完整代码

    



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函数用法

    1.在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI

    
 

    ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）

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

    2.通过ref属性获取元素

    vue3需要借助生命周期方法，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素。

    
 

    到此，相信大家对“vue3使用ref的性能警告问题如何解决”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


    本文题目：vue3使用ref的性能警告问题如何解决
    URL分享：http://cdxtjz.com/article/jdgcdc.html

    其他资讯