vue3中的toRefs与toRef

作用：使响应式对象解构出来依然具备响应式能力

1. 首先定义一个对象

<script setup lang="ts">

   import { reactive,toRefs,toRef } from 'vue'

   let person = reactive({
      name: '张三',
      age: 18
   });

</script>

2.  解构数据

<script setup lang="ts">
   import { reactive,toRefs,toRef } from 'vue'
   let person = reactive({
      name: '张三',
      age: 18
   });
    
   // 不是响应式
   let {name,age} = person   

   // 是响应式，且原person的值也会改变
   let {name,age} = toRefs(person)  

   // 是响应式，且 age2 的值变化 person.age 的值也会变化
   let age2 = toRef(person,"age")  

</script>

通常使用 toRefs 较多