Vue常用的修饰符有哪些?分别有什么应用场景?

Vue 的修饰符确实能帮我们更优雅地处理许多常见的 DOM 操作细节。为了让你快速建立一个整体印象，下面这个表格汇总了最常用的修饰符及其核心用途。

下面我们来详细看看每一类修饰符的具体应用场景和用法。

事件修饰符用于更精细地控制 DOM 事件的行为，是使用最频繁的一类。

.stop ：阻止事件冒泡。当你希望事件在当前元素处理完后不再向上级元素传递时使用。

xml 复制代码

<div @click="parentMethod">
  <button @click.stop="childMethod">点击我</button>
</div>
<!-- 点击按钮只会触发 childMethod，不会触发 parentMethod -->

.prevent ：阻止事件的默认行为 。常用于表单提交 (submit) 或链接跳转 (a标签的href)。

xml 复制代码

<form @submit.prevent="handleSubmit">
  <button type="submit">提交</button>
</form>
<!-- 提交表单时不会刷新页面，只执行 handleSubmit 方法 -->

.once ：事件只触发一次。适用于如发送验证码按钮，防止用户多次快速点击。
ini 复制代码
```
<button @click.once="sendVerificationCode">发送验证码</button>
```
.self ：只有当事件是由元素自身触发时才执行 （即 event.target是元素本身）。常用于避免父元素因子元素事件冒泡而被误触发。
.capture ：使用事件捕获模式。默认事件流是冒泡（由内向外），使用此修饰符后变为捕获（由外向内）。
.passive ：提升滚动等事件的性能 。告知浏览器你不想阻止事件的默认行为，让其可以立即响应，特别适用于移动端的滚动监听。注意 不要将 .passive和 .prevent一起使用 ，因为 .prevent会被忽略。

这些修饰符通常与 v-model配合，优化表单输入处理。

.lazy ：将输入框的 input事件转为 change事件。输入时不会实时更新数据，而是在输入完成（如按回车或失去焦点）后才更新。适用于搜索框提示等不需要实时校验的场景，能减少计算次数。
ini 复制代码
```
<input type="text" v-model.lazy="searchKeyword">
```
.trim ：自动过滤用户输入的首尾空白字符。中间的空格会保留。非常适合用于处理用户名、邮箱等需要去除头尾空格的输入。
ini 复制代码
```
<input type="text" v-model.trim="username">
```
.number ：尝试将用户输入转为数值类型 。即使 input的 type为 number，其 v-model绑定的值默认也是字符串。使用此修饰符后可自动转为数字，方便计算。
ini 复制代码
```
<input type="number" v-model.number="age">
```

鼠标按键修饰符 ：包括 .left（左键）、.right（右键）、.middle（中键）。可以限定只有通过特定的鼠标按键点击时才触发事件。
ini 复制代码
```
<button @click.right="showContextMenu">右键菜单</button>
```
键盘修饰符 ：用于监听特定的键盘按键。Vue 为常用按键提供了别名，如 .enter, .tab, .esc, .space, .delete(捕获"删除"和"退格"键) 以及方向键等。
xml 复制代码
```
<input @keyup.enter="submitForm" type="text">

```
对于系统修饰键（如 .ctrl, .alt, .shift, .meta），可以组合使用。.exact修饰符允许你控制精确的按键组合。
ini 复制代码
```
<button @click.ctrl.exact="onCtrlClick">仅当只按下 Ctrl 时触发</button>
```

这类修饰符用于属性绑定，在组件开发中尤其有用。

.sync ：实现父子组件间的"双向绑定"语法糖 。在 Vue 2 中，它提供了一种便捷的方式让子组件更新父组件传递的 prop。在 Vue 3 中，其功能已被 v-model的参数所替代，但了解它仍有意义。
xml 复制代码
```

<child-component :title.sync="pageTitle" />


this.$emit('update:title', newTitle);
```
.prop ：强制将值作为 DOM 属性而非特性绑定 。适用于需要将值绑定到 DOM 对象的属性（如 value）而非 HTML 标签的特性（attribute）的场景。
.camel ：将 v-bind的属性名转换为驼峰命名 。这在需要绑定 SVG 等对大小写敏感的 HTML 属性时很有用，例如将 view-box转换为 viewBox。

修饰符可以串联 ：例如 @click.stop.prevent可以同时阻止冒泡和默认行为。
顺序很重要 ：修饰符的代码会按照书写顺序执行。例如 @click.self.prevent只会阻止元素自身的默认行为，而 @click.prevent.self会阻止所有点击的默认行为。
Vue 2 与 Vue 3 的差异 ：部分修饰符在 Vue 3 中有所调整。例如，Vue 2 中的 .native修饰符（用于在组件上监听原生事件）在 Vue 3 中被移除了；.sync修饰符的功能也整合进了新的 v-model。

希望这份详细的梳理能帮助你更好地理解和运用 Vue 修饰符！如果你对某个特定的修饰符或使用场景有更深入的兴趣，我们可以继续探讨。