markRaw: 标记一个对象,使其永远不会转换为 proxy。返回对象本身。shallowRef: 创建一个跟踪自身 .value 变化的 ref,但不会使其值也变成响应式的。解决我通过将对象标记为shallowRef解决了这个问题因此,
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>
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的性能警告问题怎么解决的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: vue3使用ref的性能警告问题怎么解决
本文链接: https://www.lsjlt.com/news/208274.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0