Vue3之toRefs和toRef在reactive中的一些应用方式

<template>
<h2>姓名：{{ person.name }}</h2>
<h2>姓名：{{ person.age }}</h2>
<button @click="change_name">修改名字</button>
<button @click="change_age"></button>
 </template>
 
 <script lang="ts" setup name="Person11">
  import {reactive} from 'vue'
  
 let person = reactive({
  name:'馒头',
  age:22
 })
 function change_name(){
  person.name += '*'
 }

 function change_age(){
  person.age += 1
 }

 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

let {name,age} = person

//原代码
function change_name(){
          person.name += '*'
        }

        function change_age(){
          person.age += 1
        }
//修改之后的代码
function change_name(){
          name += '*'
        }

        function change_age(){
          age += 1
        }

<h2>姓名：{{ name }}</h2>
<h2>姓名：{{ age }}</h2>

function change_name(){
          name += '*'
          console.log(name)
        }

        function change_age(){
          age += 1
          console.log(age)
        }

let {name,age} = person

let name=person.name
let age=person.age

function change_name(){
          name += '*'
          console.log(name, person.name)
        }

import {reactive,toRefs} from 'vue'

let {name,age} = toRefs(person)

function change_name(){
          name.value += '*'
          console.log(name, person.name)
        }

        function change_age(){
          age.value += 1
          console.log(age)
        }