09_Vue3中的 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>