【Vue原理】VModel - 源码版之input详解

写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】VModel - 源码版之input详解

上一篇文章，我们大概讲了所有表单元素的双绑原理，但是仍然有两个特殊的表单元素，是要多更多处理的，也不可能放在一篇文章说完，今天，我们说的是 input 的特殊处理的地方

而 input 有什么特殊处理的地方呢？

1、预输入延迟更新

2、range 类型的 input

3、v-model.lazy

4、v-model.trim、v-model-number

---

预输入延迟更新

先来看看Vue 给 input 正常绑定的回调

input: function($event) {     
    if ($event.target.composing) return;
    name = $event.target.value
}

看到我标红的地方，这句话就是完成预输入延迟更新的重点

当composing=true时，事件回调不会走到下面的更新操作，而 Vue 正式通过这个标志位，判断现在是否是预输入而确定是否需要实时更新

首先，Vue 会为 input 或者 textarea 绑定以下事件

compositionstart
compositionend
change
开始讲解这三个事件了

1、compositionstart

首先，compositionstart 会在 input 事件触发之前 触发

but！你打一些直接输入的字符，是不会触发 compositionstart 的，只会触发 input

只有打预输入的字符才会触发，比如 输入拼音，不行看图

输入普通字符