Vue 基础面试题, Vue 常用的修饰符有哪些?分别有哪些应用场景?

QA

Step 1

Q:: Vue 常用的修饰符有哪些？分别有哪些应用场景？

A:: Vue 提供了一些常用的修饰符，用来简化模板中的常见操作。常见的修饰符有：

1. .stop：阻止事件冒泡。应用场景：在处理嵌套事件时，只希望响应子组件的事件，而不触发父组件的事件。

2. .prevent：阻止默认事件。应用场景：在提交表单时，阻止页面刷新或阻止链接的默认跳转行为。

3. .capture：使用捕获模式添加事件监听。应用场景：在捕获阶段拦截事件，通常用于复杂的事件处理逻辑中。

4. .self：仅当事件在该元素本身触发时才触发回调。应用场景：在子元素中有类似事件的情况下，仅希望在父元素本身触发事件。

5. .once：事件只触发一次。应用场景：用于执行一次性初始化操作，例如一次性加载资源。

6. .passive：提升页面性能，告诉浏览器事件的回调函数不会调用 event.preventDefault()。应用场景：在滚动事件中使用，避免性能问题。

用途

在前端开发中，Vue 的修饰符帮助开发者简化事件处理，减少代码量，并增强代码的可读性和维护性。在实际生产环境中，经常会遇到复杂的 DOM 事件处理需求，如嵌套的事件冒泡、阻止默认行为等，此时修饰符可以简化这些操作，提高开发效率和代码的可靠性。通过面试此类问题，可以评估候选人对 Vue 的掌握程度，尤其是他们是否能够有效地利用 Vue 的特性来处理常见的开发场景。\n

相关问题

🦆

Vue 中的指令是什么?可以自定义指令吗?如何使用?▷

Vue 中的指令是用于对 DOM 元素进行操作的特殊语法。常见的内置指令有 v-bind``, v-model``, v-if``, v-for 等。Vue 允许自定义指令，通过 Vue.directive 或在组件内的 directives 属性中定义。自定义指令主要用于封装复杂的 DOM 操作，比如点击外部关闭、拖拽等。

🦆

Vue 中如何实现组件之间的通信?▷

Vue 提供了多种组件通信的方式，包括父子组件之间通过 props 和 events 通信、使用 Vuex 进行全局状态管理、使用 provide/inject 进行祖孙组件通信、以及事件总线等方式。不同的场景下，选择合适的通信方式能提高组件间的解耦性和代码的可维护性。

🦆

v-model 是如何实现的?可以自定义 v-model 吗?▷

v-model 是 Vue 提供的语法糖，用于在表单元素上进行双向绑定。其原理是结合了 value 和 input 事件。Vue 3 中允许通过 modelValue 和 update:modelValue 进行自定义 v-model，用于自定义组件的双向绑定。

🦆

Vue 生命周期有哪些?每个阶段的作用是什么?▷

Vue 的生命周期包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。每个生命周期钩子都有其特定的作用，created 常用于初始化数据，mounted 用于操作 DOM，beforeDestroy 常用于清理定时器或事件监听器。

🦆

Vue 的虚拟 DOM 是什么?有什么优点?▷

Vue 的虚拟 DOM 是一种轻量级的 JavaScript 对象，用于描述 DOM 的结构和内容。其优点在于：

1. 提升性能：通过最小化 DOM 操作，减少页面重绘和重排。

2. 跨平台：虚拟 DOM 是平台无关的，可以用于 SSR 或其他渲染环境。

3. 更易维护：开发者可以专注于数据和逻辑，不需要直接操作 DOM。

Vue 在 created 和 mounted 这两个生命周期钩子中请求数据有什么区别什么是 Vue 的 vmodel有什么作用