【vue3练习 -10】vue3使用toRef()、toRefs()

理解：这两个api其实就是给简化模板用的，比如你定义了一个很多层次的对象，你的模板里面需要一直点key，知道拿到自己想要的那个值，这时你只需要使用toref（）即可直接使用最终的那个value值，

至于为啥不直接在return里面用ref那是因为直接ref定义的数据是一个新的数据，不是你之前在setup里面定义的那个reactive对象了，变成了两个对象

toRef是单个key：value使用，toRefs是直接一整个对象使用

代码示例：

<template>
  <!-- <div>
    <span>平常写法：   </span>
    <span
      >我叫{{ person.name }},今年{{ person.age }}岁，我有一部{{
        person.phone.brand
      }}手机，它是我从{{ person.phone.channel.source }}购买的</span
    >
  </div>
  <div>
    <span>toref写法：  </span>
     <span
      >我叫{{ name }},今年{{ age }}岁，我有一部{{
       brand
      }}手机，它是我从{{ source }}购买的</span
    >
  </div> -->
   <div>
    <span>torefs写法：  </span>
     <span
      >我叫{{ name }},今年{{ age }}岁，我有一部{{
       brand
      }}手机，它是我从{{ source }}购买的</span
    >
  </div>
</template>

<script>
import { reactive, toRef, toRefs } from "vue";
export default {
  name: "",
  setup() {
    let person = reactive({
      name: "川建国",
      age: "74",
      phone: {
        brand: "华为",
        price: 5555,
        color: "黑色",
        channel: {
          source: "拼多多",
          country: "china",
        },
      },
    });
    //接收两个参数，一个是你用reactive定义过的对象，第二个是对象的key
    const name = toRef(person,'name')//返回一个value值
    // 接收一个参数，参数是一个你用reactive定义过的对象，（他只会解析第一层对象，深层对象需要person.obj）
    const obj = toRef(person)//返回一个对象
    return {
      person,
      name:toRef(person,'name'),//使用时当做value值
      age:toRef(person,'age'),
      brand:toRef(person.phone,'brand'),//多层对象用法
      source:toRef(person.phone.channel,'source'),
      ...toRefs(person),//由于返回的是一个对象，所以在对象里写对象需要扩展运算符
      ...toRefs(person.phone),
      ...toRefs(person.phone.channel),多层对象用法
    };
  },
};
</script>

<style lang="" scoped>
</style>