toRef和toRefs可以理解为给一个响应式对象的一个或多个属性创建ref对象。ref的值会和响应式对象的值保持同步。
区别就是toRef是创建一个,toRefs是一下创建多个。
响应式对象可以是我们用reactive创建的对象,或者是setup函数中参数props。
toRef
我们还是通过例子来学习,
首先我们创建一个响应式的对象,
const data = reactive({
name: 'linge',
age: 18,
})
现在我们打印一下age:
console.log(data.age)
输出结果是:
它是一个单纯的数字类型
使用toRef函数,我们可以根据age这个属性,创建一个ref对象:
const ageRef = toRef(data, 'age')
console.log(ageRef)
这时候,我们打印的就是一个ref对象了
使用.value获取到age的值:
console.log(ageRef.value)
同时,不管是修改原来响应式对象,还是修改ref对象的值,它们都会同步修改:
ageRef.value = 19
console.log(data.age) // 输出19
data.age = 20
console.log(ageRef.value) // 输出20
那么把一个普通的属性转化为ref对象有什么用呢?
我们在使用复合函数,useFunc()给这样的函数传参数时,不要使用简单的类型,要使用ref对象
useFunc(ageRef)
官网没说为什么这么做,我认为是因为函数参数值传递的特性。有兴趣的小伙伴可以搜一下。
toRefs
跟toRef最大的区别就是toRefs创建的是一个对象,里面每个值都是ref对象,也就是一下子创建对个ref对象。
打印对比一下,就特别明显了,我们先来打印下一原来的响应式对象:
const data = reactive({
name: 'linge',
age: 18,
})
console.log(data)
打印的是一个Proxy对象
里面有两个属性,name和age
然后我们使用toRefs创建一个对象
const dataRefs = toRefs(data)
console.log(dataRefs)
结果:
我们看到dataRefs其实是一个普通对象,它里面有两个属性name和age,但是这两个属性都是ref对象。
更上面一样,它们值改变的话都是保持同步,我就不举例子了。
那toRefs有什么用?
如果我们直接解构响应式对象,那么解构出来的变量没有响应性
const { name, age } = data
console.log(name, age)
打印出来的结果name只是普通的字符串,age只是普通的数字类型,所以这两个变量就没有响应性了,
如果我们希望保持响应性,那就先调用toRefs,再解构:
const { name, age } = toRefs(data)
console.log(name, age)
这样,name和age是两个ref对象:
就会保持响应性了。
这又有什么用?
比如我的data对象上面有好多属性,都要显示在模板中:
我的名字是:{{ data.name }}
我的年龄是:{{ data.age }}
我的性别是:{{ data.gender }}
我的身高是:{{ data.height }}
我的智商是:{{ data.IQ }}
显示结果是:
我们可以看到,模板里写了好多data.,因为我们的数据都在data对象下面,这时候就可以用toRefs,然后给它解构了:
我的名字是:{{ name }}
我的年龄是:{{ age }}
我的性别是:{{ gender }}
我的身高是:{{ height }}
我的智商是:{{ IQ }}
这样模板就简洁多了
这节课就到这里了,记住toRef和toRefs的作用就是创建ref对象就可以了。