customRef
,它是vue3中允许我们创建自定义的响应式引用。
首先在vue项目中 创建一个modelRef 的一个js文件夹 在将一下代码
拿去用
import { customRef } from "vue";
export function modelref(value, data=1000){
let temit
return customRef((track,trigger)=>{
return{
get(){
track()
//依赖收集数据
console.log('我收集了数据');
return value
},
set(val){
clearTimeout(temit)
temit=setTimeout(()=>{
console.log('我发生了改变');
//trigger派发更新
trigger()
value=val
},data)
}
}
})
}
使用方法 在 需要使用的页面 进行引入
比如
<template>
<div class="about">
<h1><input v-model="text"></h1>
<div>
<h1>{{ text }}</h1>
</div>
</div>
</template>
<script setup>
import{ modelref } from '../strtaip/modlref'
let text =modelref('')
console.log(text);
</script>
我个人是做了一个翻斗的一个 版本 大家可以对我的代码删除翻斗