代码:
<template>
<div>
<input type="text" v-model="keyword">
</div>
</template>
<script>
import {
ref,
watchEffect
} from 'vue'
export default {
setup() {
let keyword = ref('')
function getKeyWordLish(val) {
return setTimeout(() => {
console.log('val',val)
//这里获取keyword,发送请求
// $api.getData({
// keyword:val
// })
}, 1000)
}
watchEffect((onInvalidate ) => {
let timer=getKeyWordLish(keyword.value)//再重新生成定时器
console.log('change',keyword.value)
onInvalidate (()=>{//watchEffect里面先执行这个函数,即是清除掉之前的定时器
clearTimeout(timer)
})
})
return {
keyword
}
}
}
</script>
需求:监听输入框输入内容,发送请求获取关键词下拉列表,点击按钮发送请求等等