toRef 和 toRefs

toRef

<template>
  <div>姓名 {{name}}</div>
  <div>年龄 {{age}}</div>
  <div>工资 {{salary}}</div>
  <div>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="salary++">增加工资</button>
  </div>
</template>

<script>
import {reactive, toRef, } from "vue";
export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 3000
        }
      }
    })
    return {
      name: toRef(person, 'name'),
      age: toRef(person, 'age'),
      salary: toRef(person.job.j1, 'salary')
    }
  }
}
</script>

•  toRef 函数接收两个参数，响应式对象和该对象上的某个属性
•  toRef 函数返回一个响应式数据并且与原响应式对象中的该属性保持映射关系
• 使用  toRef 的好处是可以将响应式对象中的某一个属性单独拿出来暴露给模板使用并且与原响应式对象中的那个属性有映射关系

toRefs

<template>
  <div>姓名 {{name}}</div>
  <div>年龄 {{age}}</div>
  <div>工资 {{job.j1.salary}}</div>
  <div>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">增加工资</button>
  </div>
</template>

<script>
import {reactive, toRefs, } from "vue";
export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 3000
        }
      }
    })
    return {
      ...toRefs(person)
    }
  }
}
</script>

• 使用  toRefs 可以简化  toRef 的使用
•  toRefs 函数接收一个响应式对象作为参数
•  toRefs 函数返回一个对象，该对象中所有的属性与原响应式对象中的属性都保持映射关系
• 通过ES6解构暴露  toRefs 函数返回的对象，从而简化模板中数据的使用