Sind Vue.js und debounce (lodash/underscore) kompatibel?

Question

Nach einem answer zu meinem question on debouncing frage ich mich, ob vue.js und lodash/underscore für diese Funktionalität kompatibel sind. Der Code in der Antwort

var app = new Vue({ 
 
    el: '#root', 
 
    data: { 
 
    message: '' 
 
    }, 
 
    methods: { 
 
    len: _.debounce(
 
     function() { 
 
     return this.message.length 
 
     }, 
 
     150 // time 
 
    ) 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script> 
 
<script src="https://unpkg.com/underscore@1.8.3"></script> <!-- undescore import --> 
 
<div id="root"> 
 
    <input v-model="message">Length: <span>{{ len() }}</span> 
 
</div>

hält zwar an der Ausführung meiner Funktion, wenn es kontinuierlich Eingang, aber wenn es schließlich nach einiger Inaktivität ausgeführt wird, der Eingang für function() scheint falsch zu sein .

Ein praktisches Beispiel nach dem obigen Code Start:

1. schnellen Abfolge von Zeichen, dann keine Aktivität:

2. Ein zusätzliche Zeichen (b) hinzugefügt, und keine Aktivität - die Länge wird aktualisiert (aber falsch, siehe unten)

3. Erase alle Zeichen mit Rück in einer schnellen Folge:

4. ein hinzufügen Charakter:

Es sieht so aus, als ob die Funktion auf dem vorletzten Wert von message ausgeführt wird.

Könnte es sein, dass _.debounce die vue.js data behandelt, bevor es tatsächlich mit dem <input> Wert aktualisiert wird?

Anmerkungen:

• sowohl mit lodash getestet und underscore, mit dem gleichen Ergebnis (für beide debounce und throttle Funktionen).
• Getestet habe ich es auch auf JSFiddle im Falle würde es bei den Verfahren Änderungen verwendet

Answer 1

Hier ist eine verbesserte Version von @ sabrabhs Version.

var app = new Vue({ 
 
    el: '#root', 
 
    data: { 
 
    message: '', 
 
    messageLen: 0 
 
    }, 
 
    methods: { 
 
    updateLen: _.debounce(
 
     function() { 
 
     this.messageLen = this.message.length 
 
     }, 300)   
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script> 
 
<script src="https://unpkg.com/underscore@1.8.3"></script> <!-- undescore import --> 
 
<div id="root"> 
 
    <input v-model="message" v-on:keyup="updateLen">Length: <span>{{ messageLen }}</span> 
 

 
</div>

Answer 2

Warum dies geschieht, weil Vue ruft methods nur, wenn vue Variablen einige Interferenzen mit dem SO-Schnipsel sein, wenn es keine Änderungen in den vue varaibles wird es diese Methoden nicht auslösen.

Auch in diesem Fall wird die zuletzt aufgerufene Methode weiterhin angezeigt, sobald wir mit der Eingabe aufhören, und wird erst wieder angezeigt, wenn Sie die Eingabe erneut eingeben.

Ein alternativer Ansatz, wenn Sie eine Funktion aufrufen, an allen Eingängen nicht möchten, können Sie ein Mehtod on blur Ereignis nennen kann, wird so Methode nur aufgerufen werden, wenn der Fokus aus Eingabefeld geht, wie folgt vor:

var app = new Vue({ 
 
    el: '#root', 
 
    data: { 
 
    message: '', 
 
    messageLen: 0 
 
    }, 
 
    methods: { 
 
    updatateLen: 
 
     function() { 
 
     this.messageLen = this.message.length 
 
     }   
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script> 
 
<script src="https://unpkg.com/underscore@1.8.3"></script> <!-- undescore import --> 
 
<div id="root"> 
 
    <input v-model="message" v-on:blur="updatateLen">Length: <span>{{ messageLen }}</span> 
 

 
</div>