[vue3新特性] 12.组合api——13.toRef和toRefs

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.,因为我们的数据都在data对象下面,这时候就可以用toRefs,然后给它解构了:




这样模板就简洁多了

这节课就到这里了,记住toRef和toRefs的作用就是创建ref对象就可以了。

你可能感兴趣的:([vue3新特性] 12.组合api——13.toRef和toRefs)