一、响应数据

import { ref, reactive, isRef, shallowRef, shallowReactive, toRef, toRefs, toRaw, readonly, triggerRef, customRef} from "vue"

1、ref 全家桶

ref: 深层数据响应 全类型 取值赋值需要.value ref()、可以读取dom属性 ref< HTMLDivElement>()

isRef: 判断变量是否是ref对象 idRef()

 shallowRef: 浅层数据响应 shallowRef()

triggerRef: 强制更新数据 triggerRef()

customRef: 自定义ref方法  

例：function MyRef<T>(value:T){

        let timer:any

        return customRef((track,trigger)=>{

            return {

                get(){

                    track() // 接收依赖

                    return value

                },

                set(newVal){

                    clearTimeout(timer)

                    timer =setTimeout(()=>{

                        value = newVal

                        timer = null;

                        trigger() // 触发更新

                    },500)

                }

            }

        })

    }

2、reactive 全家桶

　　reactive: 深层数据响应 引用类型 取值赋值不需要.value 数组不能直接赋值 reactive({}) //{}|[]

　　shallowReactive: 浅层数据响应 shallowReactive({})

　　readonly: 把对象变成只读

3、to 全家桶

　　toRef: 解构reactive响应对象值并修改

　　toRefs: 解构reactive响应对象集合并修改

　　toRaw: 解构reactive响应对象集合并转换为普通对象