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

Posted 2023-03-30

参考技术A

toRef和toRefs可以理解为给 一个响应式对象 的一个或多个 属性创建ref对象 。ref的值会和响应式对象的值保持同步。
区别就是toRef是创建一个，toRefs是一下创建多个。
响应式对象可以是我们用reactive创建的对象，或者是setup函数中参数props。

我们还是通过例子来学习，
首先我们创建一个响应式的对象，

现在我们打印一下age：

输出结果是：

它是一个单纯的数字类型

使用toRef函数，我们可以根据age这个属性，创建一个ref对象：

这时候，我们打印的就是一个ref对象了

使用.value获取到age的值：

同时，不管是修改原来响应式对象，还是修改ref对象的值，它们都会同步修改：

那么把一个普通的属性转化为ref对象有什么用呢？
我们在使用复合函数，useFunc()给这样的函数传参数时，不要使用简单的类型，要使用ref对象

官网没说为什么这么做，我认为是因为函数参数值传递的特性。有兴趣的小伙伴可以搜一下。

跟toRef最大的区别就是toRefs创建的是一个对象，里面每个值都是ref对象，也就是一下子创建对个ref对象。
打印对比一下，就特别明显了，我们先来打印下一原来的响应式对象：

打印的是一个Proxy对象

里面有两个属性，name和age

然后我们使用toRefs创建一个对象

结果：

我们看到dataRefs其实是一个普通对象，它里面有两个属性name和age，但是这两个属性都是ref对象。
更上面一样，它们值改变的话都是保持同步，我就不举例子了。
那toRefs有什么用？
如果我们直接解构响应式对象，那么解构出来的变量没有响应性

打印出来的结果name只是普通的字符串，age只是普通的数字类型，所以这两个变量就没有响应性了，
如果我们希望保持响应性，那就先调用toRefs，再解构：

这样，name和age是两个ref对象：

就会保持响应性了。
这又有什么用？
比如我的data对象上面有好多属性，都要显示在模板中：

显示结果是：

我们可以看到，模板里写了好多data.，因为我们的数据都在data对象下面，这时候就可以用toRefs，然后给它解构了：

这样模板就简洁多了

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