背景

最近我的朋友去面某大厂前端岗位，被问到这么一个问题：vue 中怎么做到输入法输入拼音时不触发 @input 事件呢？

以前还真没留意过这件事情，毕竟大部分时间用 Vue 就是单纯地用来开发项目，哪会去关注他的一些细节呢？不过既然被问到了，那就趁机了解一下，也没坏处~

原生 input 事件

我们可以先抛开 Vue，先来看看原生的 input 事件，他是怎么的一个表现

有人说用防抖就能解决？但是防抖是解决不了这种情况的，防抖是减少触发频率的，而最终该触发啥还是得触发啥事件，不信我可以加一个防抖试试~

用户在输入拼音的过程中停顿了一下，拼音照样会被打印出来

Vue的@input事件

我们再来看看 Vue 的 @input 事件，看看表现是如何的

可以看到 @input 事件跟原生的 input 事件不同，@input 在输入拼音的时候并不会触发，而是最后得出输入法结果时才会去触发

咋做到的？

那么 Vue 到底是咋做到的呢？我们可以去 Vue 的源码中探寻，可以看到 Vue 内部是用了两个方法去处理

• compositionstart
• compositionend

我们可以去 MDN 上查查这两个方法到底是用来干啥的~可以看到你在输入需要合成的字符串时，会触发这两个回调函数。而我们输入法输入拼音时就是属于输入合成字符串的情况~

所以我们也可以利用这两个事件，去模拟实现一下 @input 的效果~

可以看到，当你输入法开始输入时，会触发compositionstart，当结束时会触发compositionend

所以我们只需要维护一个变量，去记录当前是否属于输入合成字符串期间，并且把这个变量当成 input 触发的条件即可~

这样就能达到我们想要的效果啦~

原文链接：https://mp.weixin.qq.com/s/eFzMG9uM9I9JLoJt7Qr4yg