v-model 是 vue.js 提供的語(yǔ)法糖，根據(jù)不同的表單控件監(jiān)聽(tīng)不同的事件，實(shí)現(xiàn)對(duì)表單控件的數(shù)據(jù)雙向綁定。

當(dāng)控件是 <input> 輸入框時(shí)，v-model 監(jiān)聽(tīng)其 input 事件。

如下所示，這兩種寫(xiě)法有什么區(qū)別嗎？

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

輸入中文格式化問(wèn)題

表單輸入常見(jiàn)需求：對(duì)<input>控件輸入的內(nèi)容進(jìn)行格式化，譬如：轉(zhuǎn)成大寫(xiě)字母。如果輸入的值包含中文，格式化就會(huì)引起輸入法異常。

如下圖所示，也可以在線嘗試：

如果使用 v-model 指令實(shí)現(xiàn)數(shù)據(jù)雙向綁定，就不會(huì)出現(xiàn)輸入法異常，如下圖所示，也可以在線嘗試：

上面的問(wèn)題，可以看出 v-model 不只是給變量賦值，那么，它還做了些什么呢？

v-model 源碼分析

本文參考的 vue.js 源代碼是 2.5.16

翻看 v-model 源碼，可以看到 v-model 關(guān)注的仍然是 input 事件：

input 事件綁定的回調(diào)代碼處理，如下：

這里可以看到，v-model 判斷了 composing 屬性，當(dāng)輸入法組合沒(méi)有結(jié)束的時(shí)候，直接返回，并沒(méi)有賦值。

composing 屬性并不是標(biāo)準(zhǔn) dom 元素屬性，那它是怎么來(lái)的呢？

這里可以看出，composing 屬性是 vue.js 添加到 dom 節(jié)點(diǎn)上的。

那么，是什么地方調(diào)用了這2個(gè)函數(shù)呢？可以看到，在插入dom節(jié)點(diǎn)時(shí)，vue.js 監(jiān)聽(tīng)了 compositionstart / compositionend 事件：

compositionstart / compositionend 這2個(gè) dom 事件，瀏覽器兼容性問(wèn)題可以查閱 MDN 說(shuō)明：

compositionstart 事件

compostionend 事件

源代碼中還發(fā)現(xiàn)，在是否刷新 dom 屬性值時(shí)，也用到了 composing 屬性：

這里可以看出，在輸入法組合過(guò)程中，vue.js 變量值的更新亦不會(huì)同步到 dom元素的 value 屬性。

綜上所述：

v-model 實(shí)際上是監(jiān)聽(tīng)了 <input> 控件的 input、compositionstart、compositionend 三個(gè)事件，在輸入法組合過(guò)程中就直接返回不賦值v-model 指令設(shè)置了變量 composing，此標(biāo)識(shí)還用于判斷是否更新 dom元素的 value 屬性

v-model 輸入中文觸發(fā)的事件

從上面源代碼分析可知，v-model 綁定 <input> 輸入中文時(shí)，實(shí)際觸發(fā)的事件如下：

compositionstart => 3個(gè) input => compositionend 事件，這些都是 <input>控件觸發(fā)的。最后一個(gè) input 事件，是源代碼里面看到的 onCompositionEnd 回調(diào)里面 vue.js 觸發(fā)的。

1、compositionstart事件

修改dom對(duì)象的composing屬性為 true

2、3個(gè)input事件

由于dom對(duì)象的composing屬性為true，不會(huì)賦值，直接返回。

3、compositioinend事件

修改dom對(duì)象的composing屬性為 false

4、vue.js觸發(fā)的 input事件

由于dom對(duì)象的composing屬性為false，賦值，修改相應(yīng)變量的值。

格式化問(wèn)題原因分析

再次看下文章開(kāi)頭的示例，如果使用 v-model 指令實(shí)現(xiàn)數(shù)據(jù)雙向綁定，就不會(huì)出現(xiàn)輸入法異常，如下圖所示，也可以在線嘗試：

由前面的分析可知：

v-model 指令設(shè)置了變量 composing，雖然代碼在 format 函數(shù)里更改了 this.name 的值，但此時(shí) composing 標(biāo)識(shí)阻止了將 this.name 的值同步給 input 元素的 value 屬性如果你感興趣的話，可以修改 vue.js 的源代碼，將 shouldUpdateValue 函數(shù)里對(duì) composing 屬性的判斷去掉，可以看到輸入法又跟之前一樣異常了

格式化問(wèn)題 bugfix

再次看下文章開(kāi)頭的示例，如果使用 :value, @input 實(shí)現(xiàn)數(shù)據(jù)雙向綁定，有兩個(gè)方案可以解決中文輸入異常的問(wèn)題。

方案一：監(jiān)聽(tīng) change 事件

等輸入結(jié)束失去焦點(diǎn)以后，再調(diào)用格式化方法，如下所示，也可以在線嘗試：

方案二：監(jiān)聽(tīng) input 事件，同時(shí)判斷輸入法組合過(guò)程

在輸入法組合過(guò)程中，不進(jìn)行格式化，如下所示，也可以在線嘗試：

總結(jié)

以上所述是小編給大家介紹的vue 表單輸入格式化中文輸入法異常問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論