今天小编给大家分享一下Vue的toRef、toRefs和toRaw函数如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
1. toRef
将一个对象中的属性转换成单独的响应式引用
接收两个参数：参数一 => 对象 参数二 => 属性
转换后的响应式引用会跟踪原始属性的变化
转换后的响应式可以被用于计算属性及监听器中
使用
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>2. toRefs
将一个对象的所有属性变成响应式引用
接收一个对象
追踪原对象的引用关系
原对象如果是响应式的，那么修改值会更新，视图会刷新
原对象如果非响应式，那么修改值会更新，视图不会更新
使用
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>3. toRaw
将一个响应式对象变成非响应式
修改值会更新，视图不会刷新
使用
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>