<input>フィールドの解析を一時的に行うにはどうすればよいですか？

Question

ユーザ活動がないときに<input>フィールドの内容を分析したいと思います。

私は単純な例（文字の数を数える）を取るが、実際の分析は非常に高価なので、私はバッチでそれをやりたいと思っている。バインドされた変数の

簡単な分析のためのコードは

var app = new Vue({ 
 
    el: '#root', 
 
    data: { 
 
    message: '' 
 
    }, 
 
    computed: { 
 
    // a computed getter 
 
    len: function() { 
 
     // `this` points to the vm instance 
 
     return this.message.length 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script> 
 
<div id="root"> 
 
    <input v-model="message">Length: <span>{{len}}</span> 
 
</div>

私の問題はfunction()がmessageの各変更で呼び出されていることである可能性があります。クエリを絞り込むためのメカニズムが組み込まれていますか、またはJSのこのような問題に対する典型的なアプローチはありますか？

Answer 1

これは想定されているとおりに機能します。それはドキュメントに言われたよう：

var app = new Vue({ 
 
    el: '#root', 
 
    data: { 
 
    message: '', 
 
    messageLength: 0 
 
    }, 
 
    methods: { 
 
    len: _.debounce(
 
     function() { 
 
     this.messageLength = this.message.length 
 
     }, 
 
     300 // 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" v-on:keyup="len">Length: <span>{{ messageLength }}</span> 
 
</div>

：

元のデータが

を変更しかし、それを行う方法があるときには計算されたプロパティに依存するすべてのバインディングを更新します

例：https://vuejs.org/v2/guide/computed.html#Watchers

p.s.コメントvueの作者約computedている同期：debounceとthrottleの違いについてhttps://forum-archive.vuejs.org/topic/118/throttle-computed-properties/3

p.p.s Classics article。