Vuejs 2：デバウンスがウォッチオプションで動作しない

Question

この関数をVueJsでデバウンスすると、プリミティブとしてミリ秒数を指定するとうまく動作します。しかし、私が小道具への参照としてそれを提供すれば、それを無視します。

ここで小道具の簡略版です。ここ

props : { 
    debounce : { 
     type : Number, 
     default : 500 
    } 
} 

が動作しない時計のオプションである：ここで

watch : { 
    term : _.debounce(function() { 
     console.log('Debounced term: ' + this.term); 
    }, this.debounce) 
} 

は仕事をして、時計のオプションです：

watch : { 
    term : _.debounce(function() { 
     console.log('Debounced term: ' + this.term); 
    }, 500) 
} 

は、

スコープの問題だと思われますが、修正方法はわかりません。次のように...私は時計の方法を交換する場合：

watch : { 
    term : function() { 
     console.log(this.debounce); 
    } 
} 

を...私はコンソールに表示される（500）正しいデバウンス値を取得します。

Answer 1

ここでの主な問題は、デバウンス機能を定義するときの間隔としてthis.debounceを使用することです。 _.debounce(...)が実行されているとき（コンポーネントがコンパイルされているとき）、関数はまだVueに接続されていないので、thisはではなく、であり、this.debounceは未定義です。その場合、コンポーネントインスタンスが作成された後にウォッチを定義する必要があります。 Vueは$watchを使用してそれを行うことができます。

作成したライフサイクルハンドラに追加することをお勧めします。

created(){ 
    this.unwatch = this.$watch('term', _.debounce((newVal) => { 
    console.log('Debounced term: ' + this.term); 
    }, this.debounce)) 
}, 
beforeDestroy(){ 
    this.unwatch() 
} 

なお、上記のコードは、コンポーネントが破棄される前に、unwatchを呼び出します。これは通常Vueによって処理されますが、コードが手動で時計を追加しているため、コードは時計の削除も管理する必要があります。もちろん、unwatchをデータプロパティとして追加する必要があります。

ここでは動作例を示します。

console.clear() 
 

 
Vue.component("debounce",{ 
 
    props : { 
 
    debounce : { 
 
     type : Number, 
 
     default : 500 
 
    } 
 
    }, 
 
    template:` 
 
    <input type="text" v-model="term"> 
 
    `, 
 
    data(){ 
 
    return { 
 
     unwatch: null, 
 
     term: "" 
 
    } 
 
    }, 
 
    created(){ 
 
    this.unwatch = this.$watch('term', _.debounce((newVal) => { 
 
     console.log('Debounced term: ' + this.term); 
 
    }, this.debounce)) 
 
    }, 
 
    beforeDestroy(){ 
 
    this.unwatch() 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: "#app" 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> 
 
<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="app"> 
 
    <debounce :debounce="250"></debounce> 
 
</div>

Answer 2

new Vue({ 
 
    el: '#term', 
 
    data: function() { 
 
    return { 
 
     term: 'Term', 
 
     debounce: 1000 
 
    } 
 
    }, 
 
    watch: { 
 
    term : _.debounce(function() { 
 
     console.log('Debounced term: ' + this.term); 
 
    }, this.debounce) 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script> 
 
<div id="term"> 
 
    <input v-model="term"> 
 
</div>

Answer 3

REF MDN web docs

矢印関数式、矢印関数式を試してみてください...関数式とに比べて短い構文は字句的にこの値をバインドしてい 。

Answer 4

バートの答えは、created()にCodePen

上

// SO: Vuejs 2: debounce not working on a watch option 
 

 
console.clear() 
 

 
Vue.component("debounce",{ 
 
    props : { 
 
    debounce : { 
 
     type : Number, 
 
     default : 500 
 
    } 
 
    }, 
 
    template:` 
 
    <div> 
 
     <input type="text" v-model="term"> 
 
    </div> 
 
    `, 
 
    data(){ 
 
    return { 
 
     term: "", 
 
     debounceFn: null 
 
    } 
 
    }, 
 
    created() { 
 
    this.debounceFn = _.debounce(() => { 
 
     console.log('Debounced term: ' + this.term); 
 
    }, this.debounce) 
 
    }, 
 
    watch : { 
 
    term : function() { 
 
     this.debounceFn(); 
 
    } 
 
    }, 
 
}) 
 

 
new Vue({ 
 
    el: "#app" 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> 
 
<div id="app"> 
 
    <debounce :debounce="2000"></debounce> 
 
</div>

例をウォッチャーの機能を構築することである@に別のバリエーション10