vue3 watchEffect防抖优化请求

代码：

<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>

需求：监听输入框输入内容，发送请求获取关键词下拉列表，点击按钮发送请求等等