今天小编给大家分享一下Vue的toRef、toRefs和toRaw函数如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
将一个对象中的属性转换成单独的响应式引用
接收两个参数:参数一 => 对象 参数二 => 属性
转换后的响应式引用会跟踪原始属性的变化
转换后的响应式可以被用于计算属性及监听器中
使用toRef
函数
<template>
<div class="wrapper">
<button @click="handleClick">修改</button>
<div>countRef: {{ countRef }}</div>
</div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue';
let obj = {
name: '张三',
count: 0
}
let countRef = toRef(obj, 'count')
const handleClick = () => {
countRef.value++
console.log(countRef.value, 'countRef.value');
}
</script>
<style scoped>
div {
font-size: 28px;
}
</style>
原对象为非响应式,改变后,值会改变,但页面不会更新
原对象是响应式,改变后,值改变,页面也会更新
<template>
<div class="wrapper">
<button @click="handleClick">修改</button>
<div>countRef: {{ countRef }}</div>
</div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue';
let obj = reactive({
name: '张三',
count: 0
})
let countRef = toRef(obj, 'count')
const handleClick = () => {
countRef.value++
console.log(countRef.value, 'countRef.value');
}
</script>
<style scoped>
div {
font-size: 28px;
}
</style>
将一个对象的所有属性变成响应式引用
接收一个对象
追踪原对象的引用关系
原对象如果是响应式的,那么修改值会更新,视图会刷新
原对象如果非响应式,那么修改值会更新,视图不会更新
使用toRefs
函数
<template>
<div>
<button @click="handleClick">修改</button>
<div>num: {{ num }}</div>
<div>count: {{ count }}</div>
<div>age: {{ age }}</div>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue';
let obj = reactive({
num: 0,
count: 0,
age: 0
})
let { num, count, age } = toRefs(obj)
const handleClick = () => {
num.value++
console.log(num.value, 'num.value');
count.value++
console.log(count.value, 'count.value');
age.value++
console.log(age.value, 'age.value');
}
</script>
<style scoped>
div {
font-size: 28px;
}
</style>
将一个响应式对象变成非响应式
修改值会更新,视图不会刷新
使用toRaw
函数
<template>
<div>
<button @click="handleClick">修改</button>
<div>num: {{ num }}</div>
<div>count: {{ count }}</div>
<div>age: {{ age }}</div>
</div>
</template>
<script setup lang="ts">
import { reactive, toRaw } from 'vue';
let obj = reactive({
num: 0,
count: 0,
age: 0
})
let { num, count, age } = toRaw(obj)
const handleClick = () => {
num++
console.log(num, 'num');
count++
console.log(count, 'count');
age++
console.log(age, 'age');
}
</script>
<style scoped>
div {
font-size: 28px;
}
</style>
以上就是“Vue的toRef、toRefs和toRaw函数如何使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://blog.csdn.net/to_the_Future/article/details/129270956