Vue3的toRefs

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref

因为reactive 对象取出的所有属性值都是非响应式的
当更改person.age的值时，使用…person解构出来的属性值age没有相应的改变。

  setup() {
    const person=reactive({
        name:'long',
        age:23
    })
    const change1=()=>{
      person.age++
    }
    return {
      ...person,
      change1,
    };
  },

利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性
当更改person.age的值时，，使用…toRefs(person)结构出来的属性值age，就会相应的改变

  setup() {
    const person=reactive({
        name:'long',
        age:23
    })
    const change1=()=>{
      person.age++
    }
    return {
      ...toRefs(person),
      change1,
    };
  },

var a=toRefs(person)
person是一个响应式对象
a是一个普通对象，而a中每一个属性是一个ref对象
注：toRefs的参数需是一个reactive生成的响应式对象，如果其参数是一个普通对象，将没有响应式效果