setup语法更简洁

    1. <script setup>
    2. import { reactive, ref } from 'vue'
    3. const haha = ref(0)
    4. const obj = reactive({
    5.   haha,
    6.   hehe: [1, 2, 3]
    7. })
    8. const handleChenagehaha = () => {
    9.   haha.value++
    10. }
    11. const handleChenagehaha2 = () => {
    12.   obj.haha++
    13. }
    14. </script>

    两种响应式数据方法
    ref 值
    reactive 多种数据模式
    两种模式可以互通
    当reactive中键名与ref相同并且没有赋值 则代表一个
    如果有赋值则代表不同

    浅层响应 shallowReactive（{}）

    readonly（{}）深层只读，不可更改
    shallowReadonly（{}）千层只读 ， 内部对象属性仍可更改

    判断类型
    isproxy（）
    isreadonly（）
    isreacttive（）

    toRefs 将所有属性更改为ref形式的响应式数据
    toRefs（reactive（{}））
    解决解构赋值响应式数据无效
    通过封装函数进行功能的服用，

    toref 转化单个属性
    toRef（对象，’属性’）

    computed（{
    }）