了解toRef：

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

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

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

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

代码演示

        我们在组件中定义了一个人的信息 并将定义的信息返回 在页面中使用

<template>
  <div>
    <h1>姓名：{{person.name}}</h1>
    <h2>年龄：{{person.age}}</h2>
    <h3>喜欢的水果：{{person.likeFood.fruits.apple}}</h3>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age++">修改年龄</button>
    <button @click="person.likeFood.fruits.apple += '！'">修改水果</button>
  </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name: "App",
  setup() {
    // 定义了一段数据
    let person = reactive({
      name: '张三',
      age: 18,
      likeFood: {
        fruits:{
          apple: '苹果'
        }
      }
    })
    // 将数据返回出去
    return {
      person,
    }
  }
};
</script>

        我们可以看到在模板中的使用的数据 都是person.xxx 、person.xxx。 person一直出现在插值语法中看起来并不整洁

        现在我们就想在插值语法中直接写 name age apple了 不想在 person.xxx了  

        很多同学 第一想到的就是 将返回的数据修改一下 

...
    // 模板内容
    <h1>姓名：{{name}}</h1>
    <h2>年龄：{{age}}</h2>
    <h3>喜欢的水果：{{apple}}</h3>
    <button @click="name += '~'">修改姓名</button>
    <button @click="age++">修改年龄</button>
    <button @click="name += '！'">修改水果</button>
...
    // 将数据返回出去
    return {
      name: person.name,
      age: person.age,
      apple: person.likeFood.fruits.apple
    }
...

        然后打开浏览器一看 修改按钮点击失效了 点击无法修改数据了 

        接下来我们分析问题 我们看返回值  我们可以看到 我们返回的name age apple 变成了一个基本数值 不在是一个响应对象了 点击修改按钮自然也就无法做出修改了 

return {
      name: person.name,         // person.name 表达式执行完返回的直接就是 '张三'
      age: person.age,    // person.age表达式执行完返回的直接就是 18
      apple: person.likeFood.fruits.apple    // person.likeFood.fruits.apple 表达式执行完返回的直接就是 '苹果'
    }

// 所以我们返回出去的不在是一个响应式数据 

          这个时候我们想要实现以上效果 就必须要借助toRef方法了

使用toRef 

        首先引入toRef方法 然后在返回的时候调用toRef并传入要返回的对象里面的哪个值，就可以实现响应式数据了

// 引入toRef方法
import {reactive, toRef} from 'vue'

// 返回的时候调用toRef方法将要返回的对象和属性传递给toRef方法
return {
  name: toRef(person, "name"),
  age: toRef(person, "age"),
  apple: toRef(person.likeFood.fruits, "apple")
}

        这样就可以实现数据响应了 

使用toRefs

        引入toRefs方法 我们还可以使用toRefs来包装多个ref数据  解构之后返回 模板中也可以使用

<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h2>年龄：{{age}}</h2>
    <h3>喜欢的水果：{{likeFood.fruits.apple}}</h3>
    <button @click="name += '~'">修改姓名</button>
    <button @click="age++">修改年龄</button>
    <button @click="likeFood.fruits.apple += '！'">修改水果</button>
  </div>
</template>
...

return {
   ...toRefs(person)   // 将对象解构后返回
}
...