v-model 和 v-modellazy 的区别

v-model: 默认情况下，v-model 在每次输入事件 (input) 发生时都会更新数据。这意味着当用户在输入框中每次按键时，数据都会实时更新。

v-model.lazy: .lazy 修饰符会更改 v-model 的行为，使其在 change 事件而不是 input 事件上同步。这意味着数据只有在输入框失去焦点或用户按下回车键时才会更新，而不是用户每次键入字符时。

区别很简单，但是为什么非要有个lazy呢?

lazy 背后的考虑

1. 性能考虑: 在某些情况下，实时处理每一个 input 事件可能是性能昂贵的。例如，如果输入绑定到一个复杂的计算属性或触发一系列的 DOM 变动，每次键入都会导致这些操作执行，这可能导致不必要的计算和渲染。通过使用 .lazy，你可以确保只在必要时执行这些操作，例如当用户完成输入并移出输入框时。
2. 用户体验: 在某些应用中，你可能不希望在用户还在输入时即刻给出反馈（例如，实时的表单验证）。有时，直到用户完成输入并移出输入框，你才开始显示验证消息，这样可以避免中途打断用户。
3. 控制: Vue 提供了一系列的修饰符（如 .lazy, .number, .trim），这样开发者可以根据需要精确地控制输入的行为。不是所有应用都需要实时的输入同步，.lazy 修饰符为那些需要更细粒度控制的场景提供了选择。
4. 与其他库/框架的一致性: 其他前端框架和库中的双向数据绑定机制通常不会在每次键入时都更新数据，而是在某些特定事件（如失去焦点）时才更新。.lazy 修饰符为那些从其他框架迁移到 Vue 的开发者提供了熟悉的行为。