Vue入力ストリームは、リアルタイム要求インターフェースのインスタンスコードを避ける

検索をするときは、検索ページが入力ボックス一つだけで、確定ボタンがない場合は、ユーザーが入力したときにのみサービスを要求し、データを検索することができます。このように頻繁に要求を送信することによって、サーバー側の圧力がかかります。
この問題を解決するには、Vueを使って入力の流れを作ることができます。
1、ツールクラスを作成し、debounce.js

/***
 * @param func          
 * @param delay     
 */
export function debounce(func, delay) {
 let timer
 return (...args) => {
  if (timer) {
   clearTimeout(timer)
  }
  timer = setTimeout(() => {
   func.apply(this, args)
  }, delay)
 }
}

2、検索ページで使用する

<template>
 <div class="xn-container">
  <input type="text" class="text-input" v-model="search">
 </div>
</template>

<script>
 import {debounce} from '../utils/debounce'
 export default {
  name: 'HelloWorld',
  data () {
   return {
    search: ''
   }
  },
  created() {
   this.$watch('search', debounce((newQuery) => {
    // newQuery     
    console.log(newQuery)
   }, 200))
  }
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .text-input {
  display: block;
  width: 100%;
  height: 44px;
  border: 1px solid #d5d8df;
 }
</style>

以上のこのvue入力ストリームは、リアルタイムリクエストインターフェースのインスタンスコードを避けるために、小編集が皆さんに提供した内容のすべてを共有しています。