H5W3
当前位置:H5W3 > JavaScript > Vue相关 > 正文

vue3 watchEffect防抖优化请求实现

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>

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

本文地址:H5W3 » vue3 watchEffect防抖优化请求实现