Vue基础教程（102）表单输入绑定之修饰符中的lazy：Vue的这个小懒招，让你的输入框不再“喋喋不休”！摸鱼必备lazy修饰符深度揭秘-优快云博客

朋友们，不知道你们有没有遇到过这种场景——你在一个输入框里噼里啪啦打字，结果每敲一个键，页面就跟抽风似的抖动一下，或者控制台疯狂输出日志？就像有个过于热情的服务员，你每吃一口菜他就跑来问一句“味道怎么样”，烦不烦？

今天我要给你安利Vue里的一个“摸鱼小技巧”：lazy修饰符。这玩意儿简直就是为“懒人”设计的，不过此懒非彼懒，是那种能让代码更优雅、性能更出色的高级懒！

想象一下，你在开发一个记账本应用。有个输入框用来记录今日煎饼果子支出：

<input v-model="money" type="text">
<p>你输入了：{
  
  { money }}</p>

数据区很简单：

data() {
  return {
    money: ''
  }
}

现在你开始输入“15”（表示15块钱），神奇的事情发生了：当你输入“1”时，下面立马显示“1”；输入“5”时，又瞬间变成“15”。

看起来很智能对不对？但如果你在watch里监听这个值：

watch: {
  money(newVal) {
    console.log('金额变了：', newVal)
    // 这里可能还有复杂的计算或者API调用
  }
}

你会发现，只是输入“15”这两个字符，控制台就输出了两次！第一次是“1”，第二次是“15”。

这就暴露问题了：对于某些场景，我们其实不需要这么“实时”的反馈。比如：

这时候，就该请出我们的主角——lazy修饰符了！

简单说，lazy就是告诉Vue：“别那么急嘛，等输入框失焦了再更新数据！”

还是那个记账本的例子，我们加个lazy试试：

<input v-model.lazy="money" type="text">
<p>你输入了：{
  
  { money }}</p>

现在你再来输入“15”：输入“1”时，下面没反应；输入“5”时，下面还是没反应；直到你点击其他地方让输入框失焦，或者按了回车键——哇，瞬间显示“15”了！

背后的原理是什么？

正常情况下，v-model监听的是input事件（每次输入都触发）。加了lazy后，它改监听change事件（失焦或回车时触发）。