shallowRef 浅 ref 修改value是响应式修改value值里面的属性不是响应式

<div>{{arr3}}</div>
<button @click="trigger">arr3的深层响应</button>

const arr3=shallowRef([1,2,3])
//trigger 主动派发更新，让shallowRef修改的深层数据  也渲染视图
function trigger(){
	arr3.value.push(4)
	console.log("arr3",arr3)
//手动触发arr3 ，更新
	triggerRef(arr3)
}

customRef

自定义的ref

<p>{{num}}</p>
<button>num++</button>

//track 依赖收集
//trigger 派发更新
let  temp=20
const num =customref((track,trigger) =>
	({
			get(){
					//访问数据做依赖收集
					track()
					return temp
				},
			set(newVal){
					//设值的时候派发更新
					temp=newVal
					trigger()
			},
	})
)
//自定义数据
const num2=useThrottle(30,1000)
//封装一个hooks函数
function useThrottle(value,wait){
	//变量loading 存储状态
	let loading=false
	return customRef((tack,trigger)=>{
				get(){
							//依赖收集
							tack()
							return value
						},
				set(newVal){
							if(loading )return 
								loading=true
								//数据赋值
								value=newVal
								//派发更新
								trigger()
								//等待一段时间之后，把loading还原成false
								setTimeout(()=>{
									loading=false
								},wait)
						},
})
}

isRef判断是否是ref创建的数据

const num=ref（10）
//isRef判断是否是ref创建的数据
console.log（"isRef(num)",isRef(num)） //true
//unref 获取ref数据的value值
console.log（"unref(num)",unref(num)）//10

isProxy，判断是不是为reactive or readonly（只读数据）创建的数据

const p1 = new Proxy(
{},
{
get() {},
set() {}
})
console.log("isProxy(p1)",isProxy(p1));//false

toRaw 获取reactive数据的原始值

Vue3中shallowRef OR triggerRef

customRef

isRef判断是否是ref创建的数据