Vueで計算されたプロパティ/ゲッタをデバウンス

Question

私はデバッガ（lodash）計算されたプロパティやvuexゲッターとは思えません。デバウンスされた関数は常にundefinedを返します。

https://jsfiddle.net/guanzo/yqk0jp1j/2/

HTML：

<div id="app"> 
    <input v-model="text"> 
    <div>computed: {{ textComputed }} </div> 
    <div>debounced: {{ textDebounced }} </div> 
</div> 

JS：

new Vue({ 
    el:'#app', 
    data:{ 
    text:'' 
    }, 
    computed:{ 
    textDebounced: _.debounce(function(){ 
     return this.text 
    },500), 
    textComputed(){ 
     return this.text 
    } 
    } 

}) 

Answer 1

私は私のコメントで言及したよう、デバウンスは本質的に非同期操作であり、その値を返すことができません。あなたのニーズに応じて、入力側でデバウンスすることができます。 textの値とtextComputedの値の間に違いはありませんが、v-model="textComputed"の場合、値の設定はデバッグされます。

デバッグされたバージョンの変数が特に必要な場合は、ブロガーが良い解決策を示しています。

var x = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    text: 'start' 
 
    }, 
 
    computed: { 
 
    textComputed: { 
 
     get() { 
 
     return this.text; 
 
     }, 
 
     set: _.debounce(function(newValue) { 
 
     this.text = newValue; 
 
     }, 500) 
 
    } 
 
    } 
 
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> 
 
<div id="app"> 
 
    <div> 
 
    Debounced input: 
 
    <input v-model="textComputed"> 
 
    </div> 
 
    <div> 
 
    Immediate input: 
 
    <input v-model="text"> 
 
    </div> 
 
    <div>computed: {{ textComputed }} </div> 
 
    <div>debounced: {{ text }} </div> 
 
</div>

Answer 2

私はデバウンス機能が計算されたプロパティでは動作しません理由として任意の洞察力を持っていません。しかし、別の解決方法は、デバウンスをmethodsセクションの関数に置き、watch経由で呼び出すことです。

https://jsfiddle.net/vsc4npv3/

HTML：

​​

はJavaScript：

var x = new Vue({ 
    el:'#app', 
    data:{ 
    text:'', 
    debouncedText: '' 
    }, 
    watch: { 
    text: function (val) { 
     this.debouncer(); 
    } 
    }, 
    computed:{ 
    textComputed(){ 
     return this.text; 
    } 
    }, 
    methods: { 
    debouncer: _.debounce(function(){ 
     this.debouncedText = this.text; 
    },500) 
    } 

})