鍍金池/ 問(wèn)答/HTML/ vue 2.4 和2.5 版本的@input事件不一樣

vue 2.4 和2.5 版本的@input事件不一樣

同樣的代碼,<input type="text" v-model="aa" @input="aa = aa.replace(/\D/g, '')">

2.5版本還是會(huì)瞬間顯示輸入的內(nèi)容再匹配掉,2.4則不會(huì)顯示匹配掉的內(nèi)容

回答
編輯回答
真難過(guò)

好巧啊,我剛好在寫(xiě) Vue源碼閱讀 - 批量異步更新與nextTick原理 的文章,剛好涉及了這一塊的內(nèi)容~

這個(gè)情況在vue的源碼中尤雨溪也注釋出來(lái)了,你可以點(diǎn)進(jìn)去看看,所以在2.5之后的版本更改了這個(gè)情況,我這里就翻譯一下:

在2.4之前的版本中,nextTick基本上基于microtask來(lái)實(shí)現(xiàn)的,但是在某些情況下microtask具有太高的優(yōu)先級(jí)
,并且可能在連續(xù)順序事件(例如#4521,#6690)之間或者甚至在同一事件的事件冒泡過(guò)程中(#6566)之間觸發(fā)。
但是如果全部都改成macrotask,對(duì)一些有重繪和動(dòng)畫(huà)的場(chǎng)景也會(huì)有性能影響,如 issue #6813。
這里提供的解決辦法是默認(rèn)使用microtask,但在需要時(shí)(例如在v-on附加的事件處理程序中)強(qiáng)制使用macrotask

所以2.4之前不會(huì)顯示是因?yàn)橹笆褂胢icrotask來(lái)實(shí)現(xiàn)的dom事件,它在當(dāng)前tick的macro task執(zhí)行完之后 patch 之前執(zhí)行,所以我猜測(cè)是因?yàn)?micro task 高優(yōu)先級(jí)的原因沒(méi)等當(dāng)前tick的變動(dòng) patch 渲染到真實(shí)dom上就已經(jīng)更改了數(shù)據(jù),因此當(dāng)然不會(huì)渲染到真實(shí)DOM上了。

而2.5之后的nextTick使用macrotask,是肯定在下個(gè)tick之后執(zhí)行的回調(diào),所以在這個(gè)回調(diào)執(zhí)行之前input進(jìn)去的內(nèi)容自然會(huì)被渲染到真實(shí)dom上,所以你看到的就是一閃而過(guò)了~

2018年4月26日 14:17
編輯回答
誮惜顏

所以呢?你的問(wèn)題是什么?難道你不應(yīng)該去看源碼然后分析其中的原因么?

另外不要這樣寫(xiě),你把 <input> 綁定到 aa 上了,就應(yīng)該

data() {
  return {
    _aa: '',
  }
},
computed: {
  aa: {
    get() {
      return this._aa;
    },
    set(value) {
      this._aa = value.replace(/\D/g, '');
    }
  }
}
2018年4月6日 00:54