在做搜尋的時候，當搜尋頁面只有一個輸入框、沒有確定按鈕的時候，只能在使用者輸入時請求服務端，查詢資料。這樣會導致頻繁的傳送請求，造成服務端壓力。解決這個問題，可以使用vue做輸入節流。
1、建立一個工具類，debounce.js

/***
 * @param func 輸入完成的回撥函式
 * @param delay 延遲時間
 */
export function debounce(func, delay) {
    let timer
    return (...args) => {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            func.apply(this
 
, args)
        }, delay)
    }
}

2、在搜尋頁面使用

<template>
    <div class="xn-container">
        <input type="text" class="text-input" v-model="search">
    </div>
</template>

<script>
    import {debounce} from '../utils/debounce'
    export default {
        name: 'HelloWorld'
 
,
        data () {
            return {
                search: ''
            }
        },
        created() {
            this.$watch('search', debounce((newQuery) => {
                // newQuery為輸入的值
                console.log(newQuery)
            }, 200))
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
 

<style scoped>
    .text-input {
        display: block;
        width: 100%;
        height: 44px;
        border: 1px solid #d5d8df;
    }
</style>