利用vue的watch可以很簡單的監聽資料變化

而watch來偵聽資料繼而呼叫業務邏輯是一種十分常見的模式

最典型的就是自動搜尋功能，如下圖，這裡我們用watch偵聽被雙向繫結的input值，而後觸發後端請求獲取資料

但是顯然如果不加任何處理的話，沒輸入一次字元都會請求一個介面。為了解決這個問題必須在watch上面加上一個延遲器。

延遲器必須內部有一個定時器來標記重入，js沒有類似c那樣的區域性靜態變數，所以我使用閉包來實現。

不說廢話，直接上程式碼

function delayer (action, delay = 600) {
    let timer = -1;
    
 
return nv => {
        clearTimeout(timer);
        timer = setTimeout(() => {
            action(nv);
        }, delay);
    };
}

 watch

watch: {
    searchWord: delayer(nv => {
        console.log(nv);
    }),
},