前置知识熟悉深层响应式和浅层响应式

当ref在模板中作为顶层属性被访问时，它们会自动解包，所以不需要.value-----模板中！！！！

    <template>
        {{num}}
    </template>
    <script setup lang="ts">
        import {ref} from 'vue'
        import type {Ref} from 'vue'
        let num:Ref<number>=ref(0)
    </script>

ref作为响应式数组和，map这种集合类型不会进行解包,需要.value去访问----集合类型！！！不在模板!!!

    <template>
    <!--模板会自动解包-->
        {{num}} 
        <e-button @click="add">点击</e-button>
    </template>
    <script setup lang="ts">
         import {ref,reactive} from 'vue'
        import type {Ref} from 'vue'
        let num:Array<Ref<number>> = reactive([ref(9)]);
        function add():void{
        //需要.value
            console.log(num[0].value)
        }
    </script>

ref作为响应式对象会自动解包,不需要.value-------比较特殊的集合类型。仅在对象！！！

    //book.ts
    import type {Ref} from "vue"
    export interfance book{
        num:Ref<number>
    }

    <template>
        <!--模板会自动解包-->
        {{num}} 
        <e-button @click="add">点击</e-button>
    </template>
    <script setup lang="ts">
        import {ref,reactive} from 'vue'
        import type {Ref} from 'vue'
        import type {book} from "text.ts"
        let num:book=reactive({
              nums:ref(0)
        })
        function add():void{
            //不许需要.value
            console.log(num.nums)
        }
    </script>

如果新的ref赋值给旧的ref，会覆盖旧的ref

    <template>
        <!--模板会自动解包-->
            {{num}} 
            <e-button @click="add">点击</e-button>
    </template>
    <script setup lang="ts">
        import {ref} from 'vue'
        import type {Ref} from 'vue'
        let num:Ref<number>=ref(0)
        let nums:Ref<number>=ref(6)
        function add():void{
            num=nums
            console.log(num)
            //结果为6
        }
    </script>