下面自定义ref可以实现延迟渲染数据,点击button可以实现防抖哦!
<template>
<h3>{{keyWord}}</h3>
<input type="text" v-model="keyWord">
<button @click="num++">{{num}}</button>
</template>
<script setup>
import { ref, customRef } from 'vue'
let num = myRef(0)
let keyWord = myRef('hello')
function myRef(value){
return customRef((track,trigger)=>{
return {
get(){
track() // 通知vue追踪value的变化
return value
},
set(newVal){
setTimeout(() => {
value = newVal
trigger() // 通知vue去重新解析模板
}, 1000);
}
}
})
}
呈现效果