Vue3 中常用的 Composition(组合)API-toRef API 和 toRefs API

toRef API 和 toRefs API

toRef 也是一个很强大并且常用的 API，它用于创建一个 ref 对象，并且 value 值指向另一个对象中的某个属性

下面通过案例演示下 toRef API 的使用

编写案例

现在有个问题，我返回的是一个 person 对象，所以用到里面的属性都要通过 person.的方式来获取，那么能不能优化一下呢？

当然是可以的，我们可以通过 toRef 去优化

引入并使用 toRef API

和其他函数一样，使用之前需要引入

// 引入toRef API  import {toRef} from "vue";

它有两个参数：参数 1：对象，参数 2：对象里面的属性

也是可以正常修改数据的

但是这样频繁的写 toRef 也不好，所以就有了 toRefs 这个 API

引入并使用 toRefs API

toRefs 是 toRef 的升级版，它可以一次性处理多个对象属性

和 toRef 一样，第一步也要先引入

  // 引入toRefs API  import {toRefs} from "vue";

引入完成后就可以使用了

但是 toRefs 只能获取第一层对象，所以处理多层对象的时候，还得自己手动嵌套处理

toRef 总结

• 作用：创建一个 ref 对象，其 value 值指向另一个对象中的某个属性。

• 语法：const name = toRef(person,'name')
  

• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

• 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)