组合式API之isRef、toRef、toRefs

前面我们学习了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")取出的。

猜你喜欢

转载自blog.csdn.net/m0_59345890/article/details/126980509