input框关于keydonw和keyup的使用分析:

@keydown="handleKeyDown($event)"
@keyup="handleKeyUp($event)"

const handleKeyDown = (event: KeyboardEvent) => {
  //这个打印，不会打印出当前输入数据，比如输入1，会打印空，在输入2，会打印1，在输入3，会打印12
  console.log("model.value is:", model.value);
}
const handleKeyUp = (event: KeyboardEvent) => {
//这个打印，会打印出当前输入数据，比如输入1，会打印1，在输入2，会打印12，在输入3，会打印123
  console.log("model.value is:", model.value);
}

这是keyDown和keyUp的一个重要不同，非常感谢实用，keyDown相当于可以保留之前的输入数据，不会立即更新，但是keyUp可以实时更新. 在做input数据验证的时候非常有用:


如下(这个案例只是其中一种场景，假设用户输入的是整数, 用来禁止用户输入超过指定值的数据，比如不能超过100):
const handleKeyDown = (event: KeyboardEvent) => {
  lastInputValue.value = model.value || "";
}


const handleInteger = (event: InputEvent) => {
  const currentValue = (event.target as HTMLInputElement).value || "";
  if (currentValue > props.maxNumber) {
    (event.target as HTMLInputElement).value = lastInputValue.value; //由于lastInputValue.value 保留了props.maxNumber之前的数据，所以这里把之前的数据赋值给model.value，实现了禁止输入大于指定值的数据
    model.value = lastInputValue.value;
    event.preventDefault();
  }
}

  <input
    v-model="model as string | number"
    @keydown="handleKeyDown($event)"
    @input="handleInteger($event)"
  >

总结:
@keydown 事件是在 按键按下 的时候触发的，此时输入框的内容 还没有更新，也就是说，model 的值是 按键按下之前的值。
@keyup 事件是在 按键松开 的时候触发的，此时输入框的内容 已经更新，所以 model 的值会是你当前输入的值。