toRef()

• 作用：创建一个ref对象，其中的value值指向另一个对象中的某个属性，类似于充当了一个中间件

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

语法： toRef(对象，‘对象里的属性’)

<template>
  <div class="App">
    <p>姓名是：{
   { uname }}</p>
    <p>年龄是：{
   { age }}</p>
    <p>年龄是：{
   { person.time }}</p>
    <p>爱好是：{
   { person.hobby.sing }}</p>
    <p>爱好是：{
   { sing }}</p>
  </div>
</template>
​
<script>
import { reactive, toRef } from 'vue'
​
export default {
  name: 'App',
  setup() {
    let person = reactive({
      uname: '坤仔',
      age: 24,
      time: '两年半',
      hobby: {
        sing: '唱',
        dance: '跳',
      },
    })
    return {
      person,
      // toRef()相当于一个中间件 进行转换成响应式数据，一次只能处理一个
      uname: toRef(person, 'uname'),
      age: toRef(person, 'age'),
      sing: toRef(person.hobby, 'sing'),
    }
  },
}
</script>

torefs()

• 功能与toref一致，但可以批量处理多个ref对象

语法： torefs(对象)

<template>
  <div class="App">
    <p>姓名是：{
   { uname }}</p>
    <p>年龄是：{
   { age }}</p>
    <p>年龄是：{
   { time }}</p>
    <p>爱好是：{
   { hobby.sing }}</p>
  </div>
</template>
​
<script>
import { reactive, toRefs } from 'vue'
​
export default {
  name: 'App',
  setup() {
    let person = reactive({
      uname: '坤仔',
      age: 24,
      time: '两年半',
      hobby: {
        sing: '唱',
        dance: '跳',
      },
    })
    return {
      // toRefs()相当于一个中间件 进行转换成响应式数据对象，处理整个对象，但是只能处理第一层
      ...torefs(person),
    }
  },
}
</script>