vue3一些API

一.shallowRef与shallowReactive

shallow浅
shallowRef：
1.作用：创建一个响应式数据，但只对顶层属性进行响应式处理。
2.用法：
let myVar = shallowRef(initialValue);
3.特点：只跟踪引用值的变化，不关心值内部的属性变化。
shallowReactive:
1.作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的
2.用法：
const myObj = shallowReactive({ … });
3.特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。
总结：
通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。

二.customRef

作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行逻辑控制。
实现防抖效果（useSumRef.ts）封装在hooks里面：

import {customRef } from "vue";

export default function(initValue:string,delay:number){
  //track（跟踪），trigger（触发）
  let msg = customRef((track,trigger)=>{
  	let timer:number
    return {
      //get何时调用？——msg被读取时候
      get(){
        track() // 告诉Vue数据msg很重要，要对msg持续关注，一旦变化就更新
        return initValue
      },
      //set何时调用？——msg被修改时候
      set(value){
        clearTimeout(timer)
        timer = setTimeout(() => {
          initValue = value
          trigger() //通知Vue数据msg变化了
        }, delay);
      }
    }
  }) 
  return {msg}
}

组件中的使用：

<template>
	<div class="app">
		<h2>{{ msg }}</h2>
		<input
			type="text"
			v-model="msg"
		>
	</div>
</template>

<script setup lang="ts" name="App">
import { ref } from 'vue'
import useMsgRef from './useMsgRef'

// 使用Vue提供的默认ref定义响应式数据，数据一变，页面就更新
// let msg = ref('你好')

// 使用useMsgRef来定义一个响应式数据且有延迟效果
let { msg } = useMsgRef('你好', 2000)

</script>