09_Vue3中的 toRef 和 toRefs-优快云博客

本文介绍了Vue中toRef和toRefs的功能，用于从响应式对象中提取并单独引用属性，以便于外部访问和操作，展示了如何在模板和脚本中使用它们来实现动态数据绑定。

toRdf

作用：创建一个 ref 对象，其 value 值指向另一个对象中的某个属性。
语法：
```
const name = toRef(person,'name')
```

应用：要将响应式对象中的某个属性单独提供给外部使用时。
扩展：toRef 与 toRefs 功能一致，但是 toRefs 可以批量创建多个 ref 对象，语法：
```
toRefs(person)
```

代码如下

<template>
  <h4>{{person}}</h4>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
<!--  用toRef时，可以直接用{{salary}}，用toRefs时，因为拿出来的实际上是job,所以需要用{{job.j1.salary}}-->
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {ref,reactive,toRef,toRefs} from 'vue'
export default {
  name: 'Demo',
  setup() {
    //数据
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    //返回一个对象(常用)
    return {
      //直接返回整个person对象
      person,
      // 用toRef把person中的每个属性单独拿出来
      // name: toRef(person,'name'),
      // age: toRef(person,'age'),
      // salary: toRef(person.job.j1,'salary'),
      // 用toRefs 把多个属性拿出来
      ...toRefs(person),
    }
  }
}
</script>