Vue中實現 input 表單搜索（防抖版）

第一種實現，給v-model添加.lazy修飾符，當聲明式變量同步更新到響應式系統中時才調接口。參考代碼如下：

<div id='app'>
    <input v-model.lazy="text" />
</div>

var app = new Vue({
    el: '#app',
    data: {
        text: ''
    },          
    watch: {
        text: function() {
            console.log('失焦時調接口', this.text)
        }
    }
})

第二種實現，使用watch的handle和deep選項，配合setTimeout()定時器實現。參考代碼如下：

<div id='app'>
    <input v-model="text" />
</div>

var app = new Vue({
    el: '#app',
    data: {
        text: '',
        timer: null
    },          
    watch: {
        text: {
            handler: function (val, oldVal) {
                if(this.timer) clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    console.log('輸入停止後500毫秒，開始調接口', this.text)
                }, 2000)
            },
            deep: true
        }
    }
})

---

本篇結束，感謝點贊！！！