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

Question

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

2.5版本还是会瞬间显示输入的内容再匹配掉，2.4则不会显示匹配掉的内容

Answer 1

好巧啊，我刚好在写 Vue源码阅读 - 批量异步更新与nextTick原理 的文章，刚好涉及了这一块的内容~

这个情况在vue的源码中尤雨溪也注释出来了，你可以点进去看看，所以在2.5之后的版本更改了这个情况，我这里就翻译一下：

在2.4之前的版本中，nextTick基本上基于microtask来实现的，但是在某些情况下microtask具有太高的优先级
，并且可能在连续顺序事件（例如＃4521，＃6690）之间或者甚至在同一事件的事件冒泡过程中（＃6566）之间触发。
但是如果全部都改成macrotask，对一些有重绘和动画的场景也会有性能影响，如 issue #6813。
这里提供的解决办法是默认使用microtask，但在需要时（例如在v-on附加的事件处理程序中）强制使用macrotask

所以2.4之前不会显示是因为之前使用microtask来实现的dom事件，它在当前tick的macro task执行完之后 patch 之前执行，所以我猜测是因为 micro task 高优先级的原因没等当前tick的变动 patch 渲染到真实dom上就已经更改了数据，因此当然不会渲染到真实DOM上了。

而2.5之后的nextTick使用macrotask，是肯定在下个tick之后执行的回调，所以在这个回调执行之前input进去的内容自然会被渲染到真实dom上，所以你看到的就是一闪而过了~

Answer 2

所以呢？你的问题是什么？难道你不应该去看源码然后分析其中的原因么？

另外不要这样写，你把 <input> 绑定到 aa 上了，就应该

data() {
  return {
    _aa: '',
  }
},
computed: {
  aa: {
    get() {
      return this._aa;
    },
    set(value) {
      this._aa = value.replace(/\D/g, '');
    }
  }
}