背景：

最近在做管理后台的项目时，遇到一个问题：在input输入过程中实时搜索，如果输入英文实时搜索时没有问题的，但是在拼写输入时，拼写未完成就已经发送了请求，比较浪费接口的性能。

解决方案：

当用户使用拼音输入法开始输入汉字时，会触发compositionstart，当拼写完成时会触发compositionend事件。利用这两个事件对拼写输入进行处理。

代码实现：

<template>
  <div>
    <input @input="handleInput" @compositionstart="compositionstart" @compositionend="compositionend" :value="message" ref="inputRef"/>
  </div>
</template>
<script>
    export default {
      data () {
        return {
          message: ''
        }
      },
      methods: {
        handleInput (e) {
          this.message = e.target.value
          setTimeout(() => {
            if (!this.flag) {
              this.search(this.message)
            }
          }, 0)
        },
        compositionstart () {
          this.flag = true
        },
        compositionend () {
          this.flag = false
        },
        search () {
          // TODO: 进行接口请求
          console.log('search', this.message)
        }
      }
    }
</script>

代码答疑：

1、在@input时，判断this.flag是否为假值,如果为假值，正常请求接口，拼写开始时，在compositionstart时将其置为true，在拼写过程中，不再进行接口请求，直到拼写完成触发compositionend，将this.flag置为false，@input再次正常请求接口。

2、@input会先于compositionstart执行，此时的this.flag尚未被置为true，所以需要使用setTimeout将其优先级滞后。