在setup里定义变量ref，toRefs,reactive三个响应式的应用

<template>
    <div>
    <div>{{msg}}</div>
    <button @click="changemsg">改变msg</button>
    <!-- 模板会自动解析value -->
    <h2>{{counter}}</h2>
    <button @click="changemsg">改变msg</button>

    <h2>{{obj.name}}</h2>
    <button @click="cheangeObjName">改变名字</button>
    <h2>{{obj.children.name}}</h2>

    <!-- 解构赋值书写方式 -->
    <div>{{name}}</div>
    <div>{{children.name}}</div>
    </div>
</template>

<script lang='ts'>
// reactive可以引用对象类型
 import { defineComponent,reactive, toRefs, onBeforeMount, onMounted } from 'vue';
// import { useRoute, useRouter } from 'vue-router';
export default defineComponent({
    
    setup(props, context) {
        
        //msg的逻辑代码
        //没有响应式
        let msg = "hello";
        function changemsg(){
            msg='nihao'
            console.log(msg);//数据不是响应式
        }

        //通过ref定义响应式变量
        //counter的逻辑代码
        let counter =ref(0)
        function changemsg(){
            counter.value++
        }
        //通过reactive定义响应式引用类型的数据
        //obj的逻辑代码
        let obj =reactive({
            name:"李四",
            age:13,
            children:{
                name:"啊啊"
            }
        })
        function cheangeObjName(){
            obj.name="索隆"
        }

        //toRefs（object） 可以使解构赋值的数据重新获取响应式
        //let {name,chedren}=toRefs(obj)  //也可以写成这样不过return出去得写上name和chedren
        return{msg,changemsg,counter,changemsg,obj,cheangeObjName,...toRefs(obj)};

    })
 
    
   
    return {
       
    }
  },
}
</script>
<style scoped lang='scss'>

</style>