背景：
最近在做管理后台的项目时，遇到一个问题：在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将其优先级滞后。
