Vue 基础面试题, Vue 中有哪些表单修饰符和事件修饰符?

Step 1

Q:: Vue 中有哪些表单修饰符？

A:: Vue 提供了一些表单修饰符，用于在表单事件绑定时对输入进行特定的处理。常见的表单修饰符有：

1. .lazy``: 该修饰符使 v-model 在 change 事件（而不是 input 事件）之后同步数据，适用于在输入完成后再更新数据的场景。 2. .number``: 自动将用户的输入值转换为数字，如果转换失败则将其设为 NaN。 3. .trim``: 自动过滤用户输入的首尾空格，适用于需要对用户输入进行预处理的场景。

Step 2

Q:: Vue 中有哪些事件修饰符？

A:: 事件修饰符用于在事件处理程序中添加特定的行为。Vue 中常见的事件修饰符包括：

1. .stop``: 调用 event.stopPropagation() 阻止事件冒泡。 2. .prevent``: 调用 event.preventDefault() 阻止事件的默认行为。 3. .capture``: 添加事件侦听器时使用捕获模式，事件会在目标元素处于捕获阶段触发。 4. .self``: 只有当事件是从事件绑定的元素本身触发时，才触发处理程序。 5. .once``: 事件处理程序只会执行一次，之后自动移除。 6. .passive``: 表示事件的默认行为将立即执行，无论事件处理程序是否调用 event.preventDefault()。

Step 3

Q:: Vue 中如何使用 .sync 修饰符？

A:: v-bind.sync 修饰符是 Vue 中一种用于实现双向绑定的方法。它实际上是 .sync 修饰符的一种语法糖，用于简化子组件与父组件之间的数据通信。当子组件内部改变数据时，父组件的数据也会被自动更新。

用法示例：

 
<child-component :some-prop.sync="parentData"></child-component>
 

这种方式的优点是简化了子组件向父组件传递数据的方式，但也需要注意，不建议滥用 .sync，因为这可能导致数据流不清晰。

Step 4

Q:: 如何使用 .passive 修饰符来提升性能？

A:: .passive 修饰符通常与滚动事件（如 scroll、touchstart）一起使用，以提高页面的滚动性能。当事件侦听器被标记为 passive 时，浏览器会提前执行默认操作（例如滚动页面），而无需等待侦听器执行完成，从而提升页面的响应速度。