Vue的@input怎么做到不监听输入法拼音的？90%人不知道~

模拟面试、简历指导、入职指导、项目指导、答疑解惑可私信找我~已帮助100+名同学完成改造！

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

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

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

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

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

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

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

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

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

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

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

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

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

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

我是林三心

一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
一个偏前端的全干工程师；
一个不正经的掘金作者；
逗比的B站up主；
不帅的小红书博主；
喜欢打铁的篮球菜鸟；
喜欢历史的乏味少年；
喜欢rap的五音不全弱鸡如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 -->

广州的兄弟可以约饭哦，或者约球~我负责打铁，你负责进球，谢谢~