面试题：Vue 表单修饰符 .lazy 有什么作用？

在 Vue 中，.lazy 是一个表单输入修饰符，主要用于改变 v-model 的默认行为，使其在输入框的 change 事件（而不是 input 事件）触发时才同步数据。

作用

默认情况下，v-model 在表单输入框中的行为是实时同步数据的，即每当用户输入内容时（触发 input 事件），数据会立即更新。而 .lazy 修饰符会将这种实时同步改为在输入框失去焦点时（触发 change 事件）才同步数据。

使用场景

• 当你希望减少数据更新的频率，避免频繁触发更新逻辑时，可以使用 .lazy。
• 适用于不需要实时同步数据的场景，比如用户输入完整内容后再进行处理。

示例

<template>
  <div>
    <input v-model.lazy="message" placeholder="输入内容">
    <p>输入的内容是：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

行为对比

• 默认行为（无 .lazy）：
  • 用户在输入框中每输入一个字符，message 都会立即更新。
  • 例如，输入 “hello”，message 会依次变为 “h”、”he”、”hel”、”hell”、”hello”。
• 使用 .lazy 后：
  • 用户输入内容时，message 不会立即更新。
  • 只有当输入框失去焦点（如按下 Tab 键或点击其他地方）时，message 才会更新为输入框中的内容。

总结

• .lazy 是 Vue 表单输入修饰符，用于将 v-model 的数据同步行为从实时更新改为在输入框失去焦点时更新。
• 适用于不需要实时同步数据的场景，可以减少不必要的更新操作，提升性能或满足特定业务需求。

其他常见的 Vue 表单修饰符还包括：

• .number：将输入值自动转换为数字类型。
• .trim：自动去除输入值的前后空格。