Vue面试必备：修饰符详解与路由跳转对比

"Vue最新面试题及答案附答案汇总" ### Vue常用修饰符详解 1. `.stop`：这个修饰符用于阻止事件冒泡。在JavaScript中，`event.stopPropagation()`方法可以防止事件继续向上层元素传播，`.stop`就实现了相同的功能。这意味着如果在一个子元素上使用了`.stop`修饰符的事件处理函数，该事件将不会被其父元素接收到。 2. `.prevent`：此修饰符与`event.preventDefault()`对应。它阻止了事件的默认行为，例如表单提交时的页面跳转，链接点击时的页面导航等。如果事件是可以取消的，那么使用`.prevent`就会取消这个行为，但并不会阻止事件的进一步传播。 3. `.capture`：事件捕获模式是从最外层的元素开始，然后逐级向下传递到目标元素。在Vue中，`.capture`修饰符使事件监听器在捕获阶段而非冒泡阶段触发，这对于在事件到达预期目标之前执行某些操作非常有用。 4. `.self`：使用`.self`时，事件处理函数只会对直接绑定它的元素做出响应，不会影响到任何子元素。即使子元素也触发了该事件，事件处理器也不会被执行。 5. `.once`：这个修饰符使得事件监听器只响应一次事件，一旦事件触发，监听器就会被移除，确保同一个事件不再重复触发。 ### Vue-router跳转方式对比 1. `location.href`：这是最基础的页面跳转方式，通过改变URL直接跳转到新页面，会引发浏览器的完整页面刷新过程，所有状态和资源都会重新加载。 2. `history.pushState`：HTML5 History API的一部分，可以在不刷新页面的情况下改变URL。这种方法适用于单页应用，可以实现平滑的页面切换，但不会自动更新视图，需要手动处理视图更新。 3. `router.push`：Vue-router提供的API，它可以利用Vue的特性进行组件的按需加载，减少DOM操作，提高性能。它使用了`pushState`并在Vue环境中提供更友好的接口。 4. `history.pushState`与`router.push`的区别主要在于Vue-router封装了`pushState`，提供了更多功能，如路由守卫、参数传递等，并且在history模式下，两者的行为基本一致。 ### Vue2.x响应式数据原理 Vue2.x中的响应式系统基于`Object.defineProperty`。在初始化Vue实例时，所有data对象中的属性会被遍历并用`defineProperty`重定义。这使得Vue可以拦截属性的读取和设置，实现数据的依赖收集和变更通知。当访问一个响应式属性时，Vue会跟踪当前组件的`watcher`作为依赖。当该属性值改变时，会触发相关`watcher`执行更新操作，从而更新视图。 ### Vuex的五种属性 Vuex的状态管理库包含了五种核心属性： - `state`：存储应用的全局状态。 - `mutations`：用于修改`state`的唯一途径，它们是同步的。 - `actions`：可以异步地派发`mutations`，通常用来处理异步操作。 - `getters`：类似于计算属性，从`state`中计算出衍生状态，可被多个组件共享。 - `modules`：允许将大Vuex store拆分成模块，每个模块都有自己的`state`、`mutations`、`actions`和`getters`。 这些属性构成了 Vuex 的核心机制，帮助开发者更好地组织和管理Vue应用中的复杂状态。