- customRef :创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制,我们可以手动写set和get里的逻辑
- customRef就像一辆手动挡车可玩性高,ref就是自动挡车
- 使用customRef实现防抖效果(在规定时间无论触发多少次方法,只执行最后一次),上代码
<template>
<!-- 实现一个效果,input输入数据,然后输入框下面同时显示数据但是,是延迟一秒之后 -->
<input type="text" v-model="word">
<span>{{ word }}</span>
</template>
<script>
import { customRef } from 'vue';
export default {
name: 'toRef',
setup() {
function myRef(value, delay) {
return customRef((track, trigger) => {
let timer;
return {
get() {
console.log('get调用了');
track();
return value;
},
set(newValue) {
console.log('set调用了');
clearTimeout(timer);
timer = setTimeout(() => {
value = newValue;
trigger();
}, delay);
}
}
})
};
let word = myRef('a', 1000);
return {
word
};
}
}
</script>