VIP32/vue3/my_project/src/components/Demo.vue

<template>
    <!-- toRefs与toRef -->
  <div class="demo">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup lang="ts" name="Demo">
    import {ref,reactive,toRefs,toRef} from 'vue'; 
    // let name =ref('孙悟空');
    // let age = ref(18);
    let person = reactive({
        name:"猪八戒",
        age:20
    })
    let {name} = toRefs(person);
    let age = toRef(person,'age')
    console.log(name,age);
    function changeName(){
        // name = '唐僧'
        name.value = '唐僧'
    }
    function changeAge(){
        age.value = 21
    }
</script>

<style>

</style>