Vue3中toRef和toRefs的使用方法

了解toRef：

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

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

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

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

代码演示

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

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

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

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

...
    // 模板内容
    
姓名：{{name}}
    
年龄：{{age}}
    
喜欢的水果：{{apple}}
    修改姓名
    修改年龄
    修改水果
...
    // 将数据返回出去
    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数据  解构之后返回 模板中也可以使用

...

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