toRefs和toRef

toRefs和toRef的作用是，给从响应式对象中解构出的属性添加响应式，并与原响应式对象保持链，修改解构出的属性，原响应式对象也会被修改

let {key1,key2} =toRefs( 响应式对象 )  :解构整个对象，添加响应式

let {key1}= toRef( 响应式对象，'key' ) :用于解构响应式对象中的某个属性

<template>
  <div>年龄{{ age }}</div>
  <button @click="addOne">+1</button>
</template>

<script setup lang='ts'>
import {reactive, ref, toRefs, toRef} from "vue";

let a = ref(1)
const person = reactive({
  name: '张三',
  age: 18
})
//直接解构会丢失响应式
// let {name, age} = person

//toRefs把整个对象解构出来，用ref给对象中的每个属性添加响应式,所以修改时要.value
//ref可以被传递,它会保持对其源 property的响应式连接，修改了解构出来的数据原对象也会修改
let {name, age} = toRefs(person)
const addOne = () => age.value++

console.log(a)//打印为一个RefImpl类,通过.value取值
console.log(person)//打印为一个Proxy,响应式的代理对象
console.log(age)//打印为ObjectRefImpl类 通过 .value取值

//toRef是给对象的某个属性添加响应式
let age1 = toRef(person, 'age')
console.log(age1)//打印为ObjectRefImpl类通过 .value取值
</script>