一、样例效果图：

 

上图点击“改变内容”后变为下图的内容

 

二、项目结构截图

 

 

三、代码

<template>
    <div>
        <h2>toRef的使用</h2>
        <p> 姓名：{{name }} </p>
        <p>年龄:{{ age }} </p>
        <button @click="changeHander">改变内容</button>
      </div>
     
</template>

<script>
 
import {defineComponent,ref,reactive,toRefs} from 'vue'

export default defineComponent({
    //组件名称
    name:'Home',
    //接收父组建的数据
    props:{
        
    },
    
    //定义子组件
    components:{
         
    },
    setup(props,ctx){
         
        let data =reactive({
        name :'yc',
        age:36
        })
 
         //toRefs 可以把一个响应式对象转换为普通的对象。
         let state2=toRefs(data);
         console.log( 'state2==>ref',state2 )
         function changeHander(){
                // 由于变成了ref，所以我们需要使用value
                state2.name.value="yangcheng"
                state2.age.value=37
            }
        return{
            changeHander,
            ...state2
        }
    }
})
    
    
</script>

<style scoped lang="scss">
</style>