在 Vue 3 中，v-model.lazy 将输入更新时机从 input 事件延后至 change 事件，适用于搜索框、表单校验等无需实时响应的场景，可减少频繁更新带来的性能开销，并支持与 .trim、.number 组合使用。
在 Vue 3 中，给 v-model 添加 .lazy 修饰符，就能把默认的“每输入一个字符就更新数据”变成“失焦或按回车时才更新”，从而减少频繁触发响应式更新带来的性能开销。
什么时候该用 .lazy
适合那些不需要实时响应、但又依赖用户最终输入结果的场景。比如搜索框（你并不需要每打一个字就发请求）、表单字段校验（验证逻辑较重）、或者绑定值会触发复杂计算或大量 DOM 更新的情况。
- 用户快速输入时页面不再卡顿
- 避免在输入中途触发不必要的 API 请求或验证
- 配合
.trim或.number使用更合理，例如：v-model.lazy.trim
.lazy 实际怎么写
语法很简单，直接在 v-model 后加点号和 lazy：
注意：它只对 和 生效， 和复选框/单选框本身监听的就是 change，所以加不加 .lazy 行为一致。
和默认行为对比很直观
不加 .lazy：用户敲 “hello”，会触发 5 次数据更新（h、he、hel、hell、hello）；
加了 .lazy：整个 “hello” 输完，再点别的地方或按回车，才更新一次。
背后的本质是把事件监听从 input 换成了 change，Vue 内部自动完成这个切换，你不用手动写 @change。
组合使用更实用
多个修饰符可以连写，顺序不影响效果：
-
v-model.lazy.number：失焦时转成数字再赋值 -
v-model.lazy.trim：失焦时去除首尾空格再赋值 -
v-model.lazy.trim.number：先去空格，再转数字，最后更新
这种组合特别适合表单提交前的预处理，既简洁又不易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
