@input实时触发，适合搜索建议、字符计数等轻量反馈；@change失焦后触发，适合终态校验、提交前快照；二者可共存分工明确，v-model.lazy等价于仅用@change同步。
在 Vue 3 表单中，@input 和 @change 都能响应输入框内容变化，但触发时机和适用场景完全不同——关键不在“要不要监听”，而在“什么时候该响应”。
@input：值一变就执行，适合实时反馈
每次用户敲一个键、粘贴一段文字、甚至用中文输入法选词过程中，只要 v-model 绑定的值实际更新了，@input 就立刻触发。它不关心焦点是否还在，也不管用户有没有“完成输入”。
- 典型用途：搜索建议、字符计数、密码强度实时提示、防抖查询（配合
setTimeout） - 注意：高频触发，避免在回调里直接发请求或做重渲染，否则影响性能
- 示例写法：
<input v-model="keyword">，onInputHandler拿到的是最新event.target.value或直接读keyword
@change：只在“确认变更”后触发，适合终态校验
@change 不是“内容变了就触发”，而是“内容变了 + 输入框失去焦点（blur）”才触发。比如用户输完邮箱，点别的地方、按 Tab 键、或者点击提交按钮——此时才算一次有效的变更。
- 典型用途：表单字段最终校验、提交前数据快照、与初始值比对是否修改过
- 特别注意：如果用户输入后没移开焦点就点提交按钮，
@change不会触发；而@input已经触发多次 - 示例写法：
<input v-model="email">，确保验证逻辑只跑一次，且面向用户“认可的结果”
别混淆：它们不是互斥，而是分工明确
一个输入框完全可以同时绑定两个事件：
- 用
@input做轻量级即时反馈（如标红提示“至少6位”） - 用
@change做重量级终态处理（如调接口查邮箱是否已被注册） - 若用
v-model.lazy，它本质上就是把v-model的同步时机从input改为change，效果等价于去掉@input、只留@change同步逻辑
补充：iOS 上的 @change 异常怎么处理？
在部分 iOS Webview 中，软键盘点击“搜索”或“完成”可能意外触发多次 @change。这不是 Vue 问题，而是底层输入行为不一致。稳妥做法是：
- 改用
@input+watch监听变量变化，手动控制执行节奏 - 或加简单防重逻辑：
if (this.lastValue === newValue) return; this.lastValue = newValue; - 避免直接依赖
@change做唯一性判断或关键业务提交
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
