v-model的input事件和自定义input事件的执行顺序，探究v-model核心原理

    v-model便捷高效的特性深得开发者喜爱，其背后的运作机制以及其原生的input事件的交互逻辑和执行顺序，虽然可以通过直接测试的方式浅层获知，但往往需要深入探究才能真正知晓

探究的两种方式

1. 代码直接测试

<input v-model="txt" @input="(e) => console.log(e.target.value, this.txt)"/>

我们发现输出的是都是输入后最新的值，因此是v-model中的input事件优先执行将value更新了

2. vue.js源码中探究

v-model的核心原理如下

<input v-model="txt" />
<!-- 会被v-model处理为 -->
<input :value="txt" @input="if($event.target.composing)return;message = $event.target.value" />

即在model指令处理中，给input元素v-bind:value = "txt" , 并且增加了@input事件输入时将e.target.value实时更新txt，至于input事件中的if判断是啥，下文知晓

了解了原理，看vue.js源码中的v-model实现会简单一些，model指令定义如下

默认v-model处理

如下输入文字时，处于未确认状态的文字，属于IME构成。在上面的①处会判断，如果是IME触发的，不会更新value，但是会触发input事件

增加事件处理方法

 结论同上测试结果，v-model生成的input事件优先级处于队首优先执行

扩展阅读

同一个DOM元素，多次绑定事件的效果是怎样的

• 绑定多个onclick事件，后边的绑定事件覆盖前边的。
• 绑定多个addEventListener事件，是不会互相覆盖的，彼此顺序执行。
• 即使用onclick绑定事件，又使用addEventListener绑定事件（默认冒泡，三参false），他们之间是不会覆盖的。如果onclick事件是直接绑定行内绑定在DOM标签上的，会优先执行onclick绑定事件，接下来执行addEventListener事件；如果onclick事件是在js代码中注册的，则绑定事件顺序执行。