Vue 2.6.11中v-model与@input共存时数据更新时机疑问

在你给出的代码场景下，handleInput函数执行时，this.val已经是更新后的选中选项值，不是初始的null。

核心逻辑说明 #

v-model是:value和@input的语法糖，对于原生<select>元素，Vue会自动绑定一个内部的@input事件处理器——这个处理器的核心作用就是把选中的选项值同步到绑定的val变量中。而事件的执行顺序是固定的：

1. 原生<select>触发input事件
2. 先执行Vue内部的v-model同步逻辑（更新val的值）
3. 再执行你自定义的handleInput回调函数

因此当handleInput运行时，val已经被内部逻辑更新为当前选中的选项值了。

关于你之前遇到null的情况 #

你之前测试得到null的结果，大概率是代码存在其他疏漏，比如：

• 当时的v-model绑定了错误的变量名
• 事件绑定书写错误（比如误绑定成非@input/@change的事件，不过@change的逻辑也是先更新v-model再执行回调）
• 或者当时的代码中存在异步操作，干扰了变量的同步读取（但你当前的代码是同步逻辑，不会有这个问题）

快速验证方法 #

你可以给handleInput添加打印语句直接确认：

handleInput() {
  console.log('当前选中值:', this.val)
  if (this.val === "option1") {
    // do something
  }
}

切换选项后，控制台会直接输出当前选中的option1或option2，直观看到val已经完成更新。

内容的提问来源于Stack Exchange，提问作者匿名