1.Composition API(其他部分)

        1.1 shallowReactive与shallowRef    

• shallowReactive : 只处理了对象内最外层属性的响应式(也就是浅响应式)
• shallowRef: 只处理了value的响应式, 不进行对象的reactive处理

      应用场景：

                如果有一个对象数据, 结构比较深, 但变化时只是外层属性变化 ===> shallowReactive

                如果有一个对象数据, 后面会产生新的对象来替换 ===> shallowRef

        1.2 readonly 与 shallowReadonly

• readonly:
  • 深度只读数据
  • 获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。
  • 只读代理是深层的：访问的任何嵌套 property 也是只读的。

• shallowReadonly
  • 浅只读数据
  • 创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换

        应用场景：

        ​​​​​​​        ​​​​​​​在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读

        代理对象来读取数据, 而不能修改或删除

        1.3 toRaw 与 markRaw

• toRaw
  • 返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。
  • 这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发界面更新。

• markRaw
  • 标记一个对象，使其永远不会转换为代理。返回对象本身

        应用场景：

• 有些值不应被设置为响应式的，例如复杂的第三方类实例或 Vue 组件对象。
• 当渲染具有不可变数据源的大列表时，跳过代理转换可以提高性能。

        1.4 防抖和节流

                防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

// 函数防抖
function debounce(fn:any,wait:number){let timer:(number|null);return function (){let context=this  //保存this,使this永远指向当前对象let args=argumentsif(timer){clearTimeout(timer)timer=null}timer=setTimeout(function (){fn.apply(context,args)     //修改this指向，并调用函数})}
}

                 节流：

// 节流
function throttle(fn:any,gapTime:number){let lastTime:(number|null);return function (){if(!lastTime||Date.now()-lastTime>gapTime){fn.apply(this,arguments)lastTime=Date.now()}}
}

        1.5 用 customRef 实现防抖

        customRef: 创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制

export default function useDebouncedRef<T>(value:T,wait=500){return customRef((track,trigger)=>{let timer:any;return{get(){track()              //告诉vue追踪数据return value},set(newValue){clearTimeout(timer);timer=setTimeout(()=>{trigger()          //告诉vue去触发界面更新value=newValue},wait)}}})
}