前面我们学习了ref这个API,它的作用是将数据变成响应式数据。
今天这学习与之相关的三个API。
isRef
作用:判断当前数据是否为ref处理过的数据,返回结果为Boolean值,true或者false.
如:
<script setup>
let a=ref(1)
let b=2
conlose.log(isRef(a),isRef(b))//打印结果true false
</script>
toRef
将一个数据转换为ref()处理过的数据,即变成响应式数据。
应用场景:当我们在setup函数内用reactive处理一个引用数据,我们导出时只想用其某个属性,我们在return对象中就直接通过对象点属性,返回这个属性。
如:
<script>
export default {
setup{
let obj=reactive({name:"张三",age:15})
return {obj.name}单独取出obj的name,这时的name就为一个字符串,并不具备响应式了
}
}
</script>
这样返回的数据就是一个字符串(“张三”),因此我们需要将其转换为响应式的。
引入toRef(),用法:toRef(对象名,"所要转换的属性名")
改进代码:
<script>
export default {
setup{
let obj=reactive({name:"张三",age:15})
let name=toRef(obj,"name")
return {name}
}
}
</script>
这里如果我们用isRef()去检测name,打印的结果为true.
到这里很多人会有疑惑,我们在toRef这里,直接ref(obj.name)也能获得响应式数据,为什么还要添加这个API。
原因:通过toRef()转换的这个属性,它与对象内的这个属性是对应的,当操作任意一个属性时,另外一个会跟随改变,这是ref处理所办不到的。
举个例子:let name=toRef(obj,"name")取出的name变量,这时name为张三,对象里面的name值也为张三。当我修改了name="李四"时,obj对象里面的name也会对应改变为李四
代码:点击按钮时修改name的值,观察name和obj.name
<script>
export default {
setup{
let obj=reactive({name:"张三",age:15})
let name=toRef(obj,"name")
let changename=function(){
name="李四"
console.log(isRef(name));//false
}
return {name,changename}
}
}
</script>
<template>
<div>
{
{name}}---------{
{obj.name}}
<button @click="changename"></button>
</div>
</template>
toRefs
这是对toRef的一种便捷,我们用toRef一次只能操作一个属性。
我们将引用数据通过toRefs处理,每一个属性就相当于toRef处理过。
例如:
let obj2=reactive({aaa:1,bbb:2})
let obj22=toRefs(obj2)//toRefs处理返回一个处理过的对象
let {aaa,bbb}=obj22//解构赋值
这里取到的aaa,bbb就是就是相当于toRef(obj2,"aaa")、toRef(obj2,"bbb")取出的。