[vue] 表单输入格式化，中文输入法异常

v-model 是 vue.js 提供的语法糖，根据不一样的表单控件监听不一样的事件，实现对表单控件的数据双向绑定。当控件是<input>输入框时，v-model 监听其 input 事件。以下所示，这两种写法有什么区别吗？

<input :value="name" @input="name = $event.target.value">
<input v-model="name">
复制代码

输入中文格式化问题

表单输入常见需求：对<input>控件输入的内容进行格式化，譬如：转成大写字母。若是输入的值包含中文，格式化就会引发输入法异常。如今使用上述两种写法来实现，示例以下：

使用 :value, @input - 输入法异常，以下图所示，也能够在线尝试：

使用 v-model 指令 - 输入法正常，以下图所示，也能够在线尝试：

上面的问题，能够看出 v-model 不仅是给变量赋值，那么，它还作了些什么呢？

v-model 源码分析

本文参考的 vue.js 源代码是 2.5.16

翻看 v-model 源码，能够看到 v-model 关注的仍然是 input 事件：

input 事件绑定的回调代码处理，以下：

这里能够看到，v-model 判断了 composing 属性，当输入法组合没有结束的时候，直接返回，并无赋值。

composing 属性并非标准 dom 元素属性，那它是怎么来的呢？

这里能够看出，composing 属性是 vue.js 添加到 dom 节点上的。

那么，是什么地方调用了这2个函数呢？能够看到，在插入dom节点时，vue.js 监听了 compositionstart / compositionend 事件：

compositionstart / compositionend 这2个是 dom 原生事件，浏览器兼容性问题能够查阅 MDN 说明：

• compositionstart 事件
• compostionend 事件

源代码中还发现，在是否刷新 dom 属性值时，也用到了 composing 属性：

这里能够看出，在输入法组合过程当中，vue.js 变量值的更新亦不会同步到 dom元素的 value 属性。

综上所述：

• v-model 其实是监听了<input>控件的 input、compositionstart、compositionend 三个事件，在输入法组合过程当中就直接返回不赋值
• v-model 指令设置了变量 composing，此标识还用于判断是否更新 dom元素的 value 属性

v-model 输入中文触发的事件

从上面源代码分析可知，v-model 绑定<input>输入中文时，实际触发的事件以下：

compositionstart => 3个 input => compositionend 事件，这些都是<input>控件触发的。最后一个 input 事件，是源代码里面看到的 onCompositionEnd 回调里面 vue.js 触发的。

一、compositionstart事件
修改dom对象的composing属性为 true

二、3个input事件
因为dom对象的composing属性为true，不会赋值，直接返回。

三、compositioinend事件
修改dom对象的composing属性为 false

四、vue.js触发的 input事件
因为dom对象的composing属性为false，赋值，修改相应变量的值。

格式化问题缘由分析

再次看下文章开头的示例，若是使用 v-model 指令实现数据双向绑定，就不会出现输入法异常，以下图所示，也能够在线尝试：

由前面的分析可知：

• v-model 指令设置了变量 composing，虽然代码在 format 函数里更改了 this.name 的值，但此时 composing 标识阻止了将 this.name 的值同步给 input 元素的 value 属性
• 若是你感兴趣的话，能够修改 vue.js 的源代码，将 shouldUpdateValue 函数里对 composing 属性的判断去掉，能够看到输入法又跟以前同样异常了

格式化问题 bugfix

再次看下文章开头的示例，若是使用 :value, @input 实现数据双向绑定，有三个方案能够解决中文输入异常的问题。

方案一：改用 v-model
v-model 已经处理了中文输入法组合的问题，直接用就好啦，以下所示，也能够在线尝试：

方案二：监听 change 事件
等输入结束失去焦点之后，再调用格式化方法，以下所示，也能够在线尝试：

方案三：监听 input 事件，同时判断输入法组合过程
在输入法组合过程当中，不进行格式化，以下所示，也能够在线尝试：