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

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

复制代码

输入中文格式化问题

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

使用 :value, @input - 输入法异常，如下图所示，也可以：

使用 v-model 指令 - 输入法正常，如下图所示，也可以：

上面的问题，可以看出 v-model 不只是给变量赋值，那么，它还做了些什么呢？

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

翻看 v-model 源码，可以看到 v-model 关注的仍然是：

input 事件绑定的处理，如下：

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

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

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

那么，是什么地方调用了这2个函数呢？可以看到，在插入dom节点时，vue.js 监听了：

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

源代码中还发现，在时，也用到了 composing 属性：

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

综上所述：

v-model 实际上是监听了<input>控件的 input、compositionstart、compositionend 三个事件，在输入法组合过程中就直接返回不赋值

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

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

1、compositionstart事件

修改dom对象的composing属性为 true

2、3个input事件

由于dom对象的composing属性为true，不会赋值，直接返回。

3、compositioinend事件

修改dom对象的composing属性为 false

4、vue.js触发的 input事件

由于dom对象的composing属性为false，赋值，修改相应变量的值。

再次看下文章开头的示例，如果使用 v-model 指令实现数据双向绑定，就不会出现输入法异常，如下图所示，也可以：

由前面的分析可知：

v-model 指令设置了变量 composing，虽然代码在 format 函数里更改了 this.name 的值，但此时 composing 标识阻止了将 this.name 的值同步给 input 元素的 value 属性

如果你感兴趣的话，可以修改 vue.js 的源代码，将 shouldUpdateValue 函数里对 composing 属性的判断去掉，可以看到输入法又跟之前一样异常了

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

方案一：改用 v-model

v-model 已经处理了中文输入法组合的问题，直接用就好啦，如下所示，也可以：

方案二：监听 change 事件

等输入结束失去焦点以后，再调用格式化方法，如下所示，也可以：

方案三：监听 input 事件，同时判断输入法组合过程

在输入法组合过程中，不进行格式化，如下所示，也可以：